threejs基础示例

1 先打一个架子，这样容易写代码

先看一个结果

    
    Title
    
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }

    








  //这里就是三维的代码写入

2 定义场景、相机、灯光

 var renderer;//渲染器

    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(new THREE.Color(0x000000)); 
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }

    var camera;//相机

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
        camera.position.x = 0;
        camera.position.y = 40;
        camera.position.z = 50;
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    var scene;//场景
    function initScene() {
        scene = new THREE.Scene();
    }

    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0x404040));

        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(1, 1, 1);
        scene.add(light);
    }

    function initModel() {
        //模型
        var object = new THREE.AxesHelper(500);
        //scene.add(object);
    }

完整代码，直接复制可用

 
 Title
 
     html, body {
         margin: 0;
         height: 100%;
     }

     canvas {
         display: block;
     }

 








 var renderer;

 function initRender() {
     renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.setClearColor(new THREE.Color(0x000000)); //
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 }

 var camera;

 function initCamera() {
     camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
     camera.position.x = 0;
     camera.position.y = 40;
     camera.position.z = 50;
     camera.lookAt(new THREE.Vector3(0, 0, 0));
 }

 var scene;

 function initScene() {
     scene = new THREE.Scene();
 }

 var light;

 function initLight() {
     scene.add(new THREE.AmbientLight(0x404040));

     light = new THREE.DirectionalLight(0xffffff);
     light.position.set(1, 1, 1);
     scene.add(light);
 }


 function initModel() {

     //模型
     var object = new THREE.AxesHelper(500);
     //scene.add(object);
 }

 //状态
 var stats;

 function initStats() {
     stats = new Stats();
     document.body.appendChild(stats.dom);
 }

 //gui
 var controls,knot,loadedMesh;
 function initGui() {
     //
     controls = {
         "radius": 13,
         "tube": 1.7,
         "radialSegments": 156,
         "tubularSegments": 12,
         "p": 3,
         "q": 4,
         "heightScale": 3.5,
         "rotate": false,
         redraw: function () {
             // 
             if (knot) scene.remove(knot);
             var geom = new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q), controls.heightScale);
             knot = createMesh(geom);
             scene.add(knot);
         },
         save:function () {
             console.log(knot);
             var result = knot.toJSON();
             localStorage.setItem("json", JSON.stringify(result));
         },
         load:function () {

             scene.remove(loadedMesh);

             var json = localStorage.getItem("json");

             if (json) {
                 var loadedGeometry = JSON.parse(json);
                 var loader = new THREE.ObjectLoader();

                 loadedMesh = loader.parse(loadedGeometry);
                 loadedMesh.position.x -= 50;
                 scene.add(loadedMesh);
                 console.log(loadedMesh);
             }
         }
     };
     var gui = new dat.GUI();
     var loadFolder = gui.addFolder("存储");
     loadFolder.add(controls, "save");
     loadFolder.add(controls, "load");

     var meshFolder = gui.addFolder("参数");
     meshFolder.add(controls, 'radius', 0, 40).onChange(controls.redraw);
     meshFolder.add(controls, 'tube', 0, 40).onChange(controls.redraw);
     meshFolder.add(controls, 'radialSegments', 0, 400).step(1).onChange(controls.redraw);
     meshFolder.add(controls, 'tubularSegments', 1, 20).step(1).onChange(controls.redraw);
     meshFolder.add(controls, 'p', 1, 10).step(1).onChange(controls.redraw);
     meshFolder.add(controls, 'q', 1, 15).step(1).onChange(controls.redraw);
     meshFolder.add(controls, 'heightScale', 0, 5).onChange(controls.redraw);
     meshFolder.add(controls, 'rotate');

     controls.redraw();
 }


 var step = 0;
 function render() {

     if (controls.rotate) {
         knot.rotation.y = step += 0.01;
     }

     renderer.render(scene, camera);
 }

 // 
 function generateSprite() {

     var canvas = document.createElement('canvas');
     canvas.width = 16;
     canvas.height = 16;

     var context = canvas.getContext('2d');
     var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
     gradient.addColorStop(0, 'rgba(255,255,255,1)');
     gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
     gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
     gradient.addColorStop(1, 'rgba(0,0,0,1)');

     context.fillStyle = gradient;
     context.fillRect(0, 0, canvas.width, canvas.height);

     var texture = new THREE.Texture(canvas);
     texture.needsUpdate = true;
     return texture;

 }

 // 创建点云
 function createPointCloud(geom) {
     var material = new THREE.PointCloudMaterial({
         color: 0xffffff,
         size: 3,
         transparent: true,
         blending: THREE.AdditiveBlending,
         map: generateSprite(),
         depthTest: false
     });

     var cloud = new THREE.Points(geom, material);
     cloud.sortParticles = true;
     return cloud;
 }

 //mesh
 function createMesh(geom) {

     //
     var meshMaterial = new THREE.MeshNormalMaterial({wireframe: true});
     meshMaterial.side = THREE.DoubleSide;

     //
     var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);

     return mesh;
 }

 //窗口重置
 function onWindowResize() {
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();

     render();
     renderer.setSize(window.innerWidth, window.innerHeight);

 }

 function animate() {
     render();
     stats.update();
     requestAnimationFrame(animate);
 }

 function draw() {
     initRender();
     initScene();
     initCamera();
     initLight();
     initModel();
     initStats();
     initGui();

     animate();
     window.onresize = onWindowResize;
 }

其中的SceneUtil.js内容，其他两个stats.min.js dat.gui.min.js可以到网上下载，如若不想下载，可以直接我从的资源中下 //SceneUtils.js,读者可以更新自己的内容到这个里面，形成自己需要的lib

THREE.SceneUtils = {
	createMultiMaterialObject: function ( geometry, materials ) {
		var group = new THREE.Group();
		for ( var i = 0, l = materials.length; i