three.js学习笔记一 

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>three.js</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/three.js"></script>
    <!--stats.js 检测动画运动的帧频-->
    <script src="js/stats.min.js"></script>
    <style>
        body { margin: 0;overflow:hidden; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <div id="WebGL-output">

    </div>
    <div id="Stats-output"></div>
</body>
</html>

　

$(function() {       
         var scene = new THREE.Scene();//场景：容器

        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相机
        var renderer = new THREE.WebGLRenderer();//渲染器
        renderer.setClearColor(0xEEEEEE,1.0);//设置scene背景色
        renderer.shadowMap.enabled = true;//允许阴影映射
        renderer.setSize(window.innerWidth,window.innerHeight);//将scene渲染的尺寸
        var axes = new THREE.AxisHelper(10);//坐标轴:AxisHelper(size)
        scene.add(axes);

        //创建平面
        var planeGeometry = new THREE.PlaneGeometry(60,20);//定义平面尺寸：宽、高
        //材质：MeshLambertMaterial;MeshPhongMaterial 会与spotLight产生的光源发生反应
              // MeshBasicMaterial（基本的材质，不会与spotLight产生的光源发生反应）
        var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});//创建一个基本的材质
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow = true;//接受阴影
        plane.rotation.x = -0.5*Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        scene.add(plane);

        //创建方块
        var boxGeometry = new THREE.BoxGeometry(4,4,4);
        var boxMaterial = new THREE.MeshLambertMaterial({
            color:0xff0000,
            //wireframe: true//线框属性
        });
        var box = new THREE.Mesh(boxGeometry,boxMaterial);
        box.castShadow = true;//接受阴影
        box.position.x = -4;
        box.position.y = 3;
        box.position.z = 0;
        scene.add(box);

　　　//创建多材质的几何图形
　　　　　
        var cubeGeometry = new THREE.CubeGeometry(5,5,5);
　　　var materials = [
    　　　　new THREE.MeshLambertMaterial({
        　　　　　color:0x44ff44,
        　　　　　opacity:0.6,
        　　　　　transparent:true
    　　　　　}),
    　　　　　new THREE.MeshBasicMaterial({
        　　　　　　color:0xff0000,
        　　　　　　wireframe: true//线框属性
    　　　　　}),
　　　　　]
　　　　　　//支持多种材质
　　　　　　var mesh = THREE.SceneUtils.createMultiMaterialObject(cubeGeometry,materials);
　　　　　　//为组中所有在子对象添加阴影
　　　　　　mesh.children.forEach(function(e){e.castShadow=true});
　　　　　　scene.add(mesh);


        //创建球体
        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({
            color:0x7777ff,
            /*wireframe:true*/
        });
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
        sphere.castShadow = true;//接受阴影
        sphere.position.x= 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        scene.add(sphere);


        //添加光源
        var spotLight =  new THREE.SpotLight(0xffffff);
        spotLight.castShadow = true;//产生阴影
        spotLight.position.set(-40,60,-10);
        scene.add(spotLight);

　　　　　//雾化
　　　　　scene.fog = new THREE.Fog(0xffffff,0.015,100);//color,near,far
　　　　　　//scene.fog = new THREE.Fog(0xffffff,0.015);//color,density
        //指定相机的位置
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);//指向场景的中心

        $("#WebGL-output").append(renderer.domElement);


        var stats = initStats();
        var step = 0;
        function renderScene() {
            stats.update();
            step += 0.04;
            sphere.position.x = 20+(10*(Math.cos(step)));
            sphere.position.y = 2+(10*(Math.abs(Math.sin(step))));
            requestAnimationFrame(renderScene)//浏览器定义的时间间隔
            renderer.render(scene,camera);
        }
        renderScene();

    })


    //显示动画的帧频
    function initStats() {
        var stats = new Stats();
        stats.setMode(0);
        stats.domElement.style.position = "absolute";
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }

 

　　参考THREE.JS开发指南

其中：现版本修改之处：

1.允许阴影映射 
x.shadowMap.enabled 替代  x.shadowMapEnabled

2.设置容器背景色
x.setClearColor(); 替代 x.setClearColorHex()

3.几何图形-方块
BoxGeometry();替代CubeGeometry()//在three.js里CubeGeometry = BoxGeometry；仍可使用
 

 









            

            
posted @ 
2017-05-25 18:15 
diao_Kyle 
阅读(90) 
评论(0) 
 
收藏 
举报