前端开发three.js入门一实例

前端开发和设计的发展前途
前端开发课程设计
web前端设计与开发贯穿任务

所需js和图片不知道怎么加载到页面里,初级入门,刚知道怎么个流程,附件完整包

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Title</title>
        <script src=”https://cdn.bootcss.com/three.js/r81/three.js”></script>
    </head>
    <body onload=”init()”>
        <script>
            var object, scene,renderer,camera;
             function init() {
             var width=500;
             var height=400;
             var oDiv=document.createElement(‘div’);
             oDiv.setAttribute(‘id’,’canvas’);
             oDiv.setAttribute(‘width’,width+”px”);
             oDiv.setAttribute(‘height’,height+”px”);
             document.body.appendChild(oDiv);
             //初始化
             renderer=new THREE.WebGLRenderer({
             antialize:true
             });
             renderer.setSize(width,height);
             oDiv.appendChild(renderer.domElement);
             // renderer.setClearColorHex(0xe2e2e2,1.0);//颜色值,alpha
             //初始化场景
             scene=new THREE.Scene();
             //初始化相机
             camera=new THREE.PerspectiveCamera(45,width/height,1,1000);
             camera.position.z=10;
             scene.add(camera);
             object=new THREE.Object3D();
             var cube=createCube1();
             object.add(cube);
             var plane=createPlane();
             scene.add(plane);
             scene.add(object);
             anmiation();
             }
             function anmiation() {
             object.rotation.x+=0.01;
             object.rotation.y+=0.01;
             renderer.render(scene,camera);
             requestAnimationFrame(anmiation);
             }
             function createCube1() {
             var gemotry=new THREE.BoxGeometry(2,2,2);
             var material=new THREE.MeshBasicMaterial({
             color:0xff00f1
             });
             var texture = THREE.ImageUtils.loadTexture(“http://cdn.attach.qdfuns.com/notes/pics/201710/02/231302jfwqd1ybwt1fp1hp.jpg”,null,function(t)
             {
             });
             var material = new THREE.MeshBasicMaterial({map:texture});
             var cube=new THREE.Mesh(gemotry,material);
             cube.position.z=2;
             return cube;
             }
            //法线贴图
             function createPlane() {
             var geometry = new THREE.PlaneGeometry(10, 8, 1, 1 );
             geometry.vertices[0].uv = new THREE.Vector2(0,0);
             geometry.vertices[1].uv = new THREE.Vector2(1,0);
             geometry.vertices[2].uv = new THREE.Vector2(1,1);
             geometry.vertices[3].uv = new THREE.Vector2(0,1);
             var texture = THREE.ImageUtils.loadTexture(“http://cdn.attach.qdfuns.com/notes/pics/201710/02/231302jfwqd1ybwt1fp1hp.jpg”,null,function(t)
             {
             });
            ![three.js入门一实例](attimg://article/content/picture/201710/02/231301s5po3afdhjzz03mj.jpg)
             var material = new THREE.MeshBasicMaterial({map:texture});
             var mesh = new THREE.Mesh( geometry,material );
             return mesh;
             }
        </script>
    </body>
</html>
前端开发选项卡设计
毕业设计前端开发
web前端设计与开发
» 本文来自:前端开发者 » 《前端开发three.js入门一实例》
» 本文链接地址:https://www.rokub.com/8006.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!