第一部分的代码 创建 场景、摄像机、渲染器 12345678910111213141516171819202122//一个三维场景需要包含 场景、摄像机、渲染器 //这行代码用来创建三维场景var scene = new THREE.Scene();//这行代码用来创建透视摄像机 //参数分别代表 视场角(视野的范围 于焦距成关系) 摄像机的长宽比 近景裁剪 远景裁剪var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//使用Webgl渲染(如果当前环境不支持webgl,threejs会自动跳转其他的渲染方式)var renderer = new THREE.WebGLRenderer();//设置渲染的范围大小//隐藏的第三个参数可以为false,写法如://setSize(window.innerWidth/2, window.innerHeight/2, false)//false情况渲染分辨率减半renderer.setSize( window.innerWidth, window.innerHeight );//将渲染的内容添加到HTML中document.body.appendChild( renderer.domElement );//这里可以附加到特定id的标签中 第二部分的代码 添加物体并将物体添加到场景中 12345678910111213//创建一个方块 参数分别是 长宽高var geometry = new THREE.BoxGeometry( 1, 1, 1 );//创建模型构成数据//创建一个材质 并且给予绿色var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );//创建模型材质数据//创建方块(将上面的变量作为参数传递进去)var cube = new THREE.Mesh( geometry, material );//将上面的数据绑定到一起//给场景添加方块scene.add( cube ); 第三部分的代码 设置摄像机位置并添加刷新函数 12345678910111213141516171819202122//设置摄像机的位置(摄像机在0,0,0位置,看不见方块)camera.position.z = 5;//调整到其他位置的方法// camera.position.y = 2;// camera.position.x = 3;// camera.lookAt(new THREE.Vector3(0, 0, 0));//让摄像机望向原点function animate() { //确保每秒刷新60次场景 requestAnimationFrame( animate ); //实现方块自转 cube.rotation.x += 0.1; cube.rotation.y += 0.1; //通过camera的摄像机将场景渲染出来 renderer.render( scene, camera );}animate(); 官方的源代码123456789101112131415161718192021var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );var geometry = new THREE.BoxGeometry( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;function animate() {requestAnimationFrame( animate );renderer.render( scene, camera );}animate(); HTML源码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html> <head> <meta charset=utf-8> <!--本文件来自于官方文档--> <title>My first three.js app</title> <style> /*overflow:hidden取消滑动栏*/ body { margin: 0;overflow: hidden } canvas { width: 100%; height: 100% } </style> </head> <body> <!--引用three.js--> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script> <script type="application/javascript"> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;// camera.position.y = 2;// camera.position.x = 3;// camera.lookAt(new THREE.Vector3(0, 0, 0)); function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render( scene, camera ); } animate(); </script> </body></html> 实现效果 效果链接 备注:这里没有添加resize函数,调整窗口需要刷新页面来更新效果 文章作者: 智伤帝文章链接: https://blog.l0v0.com/posts/37543.html版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 智伤帝的个人博客!࠴编程/前端ࡄThreejsࡅOpenGL 打赏微信支付宝上一篇Three.js - 学习之路(三)下一篇Three.js - 房产信息线上浏览Demo 相关推荐 2018-08-21Three.js -通过JQuery处理脚本异步加载 2018-08-19Three.js -动态加载相关的js 2018-08-18Three.js - postprocessing 后期处理 2018-08-11Three.js - 用最小面数生成立体的物体 2018-08-01Three.js - 学习之路(四) 2018-07-27Three.js - 学习之路(三) 评论ValineGitalk