效果:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Three.js tutorial - Lesson 04</title> <style>body{background:#000000;overflow:hidden;}</style> <script src="js/r69/three.js"></script> <script src="js/r69/Detector.js"></script> <script src="js/r69/CanvasRenderer.js"></script> <script src="js/r69/Projector.js"></script> </head> <body> <script> var scene,camera,mesh,renderer; if(Detector.webgl){ renderer = new THREE.WebGLRenderer({antialias:true}); }else{ renderer = new THREE.CanvasRenderer(); } renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 1); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); camera.position.set(0, 0, 10); camera.lookAt(scene.position); //相机聚焦于场景中心 //scene.add(camera); var boxGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0); var texture = new THREE.ImageUtils.loadTexture("images/NeHe.jpg"); //创建一个图片纹理 var boxMaterial = new THREE.MeshBasicMaterial({map:texture}); //用纹理创建一个材质 var mesh = new THREE.Mesh(boxGeometry, boxMaterial); mesh.position.set(0, 0, 4); scene.add(mesh); var xRotation = 0; var yRotation = 0; var zRotation = 0; function render(){ xRotation += 0.03; yRotation += 0.02; zRotation += 0.04; mesh.rotation.set(xRotation, yRotation, zRotation); renderer.render(scene, camera); requestAnimationFrame(render); } render(); </script> </body> </html>
附注:当前笔者使用的three.js版本是r69
相关推荐
opengl简单教程前五课pdf,
opengl简单视频教程Lesson1-Lesson5,网站地址: http://www.videotutorialsrock.com/
js-fifth-lesson
opengl简单视频教程Lesson6-Lesson9 网站地址: http://www.videotutorialsrock.com
opengl简单视频教程Lesson12-Lesson20网站地址: http://www.videotutorialsrock.com
中国民航飞行人员英语--lesson-4.doc
opengl简单视频教程Lesson10-Lesson11,网站地址: http://www.videotutorialsrock.com
COMP397-W2021-Lesson4-Build-main-源码.rar
ML-lesson4-regressio 注释版.ipynb
软件测试-Lesson4 白盒测试.pptx
新概念英语-第2册-第4课-Lesson-4-课件-PPT15602PPT课件.pptx
2020年北师大三年级上册《Bigbird!》教案1--lesson4.pdf
数学建模-lesson4(初等模型).zip
NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
next.js-ssr课程 在egghead.io上回购课程 指示 git clone https://github.com/tgrecojs/next.js-ssr-lesson && cd next.js-ssr-lesson npm install npm run dev
新概念青少版a---lesson5.ppt
struts2-lesson18
NeHe OpenGL教程(中英文版附带VC++源码)中英文系列 Lesson 01-lesson 02 创建一个OpenGL窗口: 如何创建三角形和四边形 http://ieee.org.cn/dispbbs.asp?boardID=61&ID=53679 Lesson 03-lesson 04 添加颜色 旋转 ...
plots-lesson16