第一个threejsplaygnd 3js
2017-10-23 16:24
459 查看
第一个threejsplaygnd 3js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background-color: #ffffff; margin: 0; overflow: hidden; } </style> </head> <body> <script src="http://threejsplaygnd.brangerbriz.net/js/three.min.js"></script> <script src="http://threejsplaygnd.brangerbriz.net/js/Detector.js"></script> <script> if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); var camera, scene, renderer; var geometry, material, mesh; function setup() { var W = window.innerWidth, H = window.innerHeight; renderer = new THREE.WebGLRenderer(); renderer.setSize( W, H ); document.body.appendChild( renderer.domElement ); camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 ); camera.position.z = 500; scene = new THREE.Scene(); // paste your code from the geometryGUI here map = THREE.ImageUtils.loadTexture('../texturez/soup.jpg'); geometry = new THREE.PlaneGeometry(200, 200, 4, 4); material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map}); mesh = new THREE.Mesh(geometry, material); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.repeat.set( 1, 1 ); scene.add(mesh); } function draw() { requestAnimationFrame( draw ); // experiment with code from the snippets menu here camera.position.x = Math.sin( Date.now() * 0.002 ) * 50; mesh.position.y = Math.sin( Date.now() * 0.002 ) * 30; camera.lookAt(mesh.position); renderer.render( scene, camera ); } setup(); draw(); </script> </body> </html>
相关文章推荐
- 第一个Three.js程序——加入相机
- WebGL之Three.js开发第一个场景(含源码)
- three.js自学之旅(2)—— 搭建第一个简单的场景
- Three.js学习记录--html5的编辑和第一个场景
- Three-js 创建第一个3D场景
- 第一个three.js程序
- -Three.js开发指南---用three.js创建你的第一个三维场景(第一章)
- 初学WebGL,使用Three.js开发第一个3d场景示例
- 第一个three.js程序
- three.js 第一个项目总结
- Three.JS第一个三维场景建立
- 第一个简单的three.js
- 丰富你的第一个Three.js场景
- 第一个Three.js程序——动手写一个简单的场景
- Three.JS 添加灯光、材质和阴影(第一个例子)
- 第一章 用three.js创建你的第一个3D场景
- 【three.js练习程序】鼠标滚轮缩放
- three.js 源码注释(五十六)Material /PointCloudMaterial.js
- 【three.js练习程序】创建地球贴图
- 使用Three.js + Blender构建在浏览器端显示的3D模型(4)