three.js实现3D模型展示

由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家

先看看效果:

three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的

首先我们在页面上需要创建一个能够放置3D模型的画布 也可以说是初始化 Three

1 var WIDTH,HEIGHT; 2 var renderer; 3 function initThree() { 4 WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} --> 5 HEIGHT = document.documentElement.clientHeight/2; 6 /* 渲染器 */ 7 renderer = new THREE.WebGLRenderer(); 8 renderer.setSize(WIDTH , HEIGHT); 9 renderer.setClearColor(new THREE.Color(0x66666)); 10 renderer.gammaInput = true; 11 renderer.gammaOutput = true; 12 13 document.body.appendChild(renderer.domElement); 14 }