第一个简单的three.js

去git上下载了书本的实例文档后开始撸书上的第一个例子

先把juqery和threejs的源码引入进来

最后引入底下自己写的代码

注意要放在body后面引入

然后就是第一段javascript代码

/**
 * Created by 12204 on 2016/11/12.
 */
 function init() {


        //创建一个场景
        var scene = new THREE.Scene();


        // 创建一个相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);


        // 创建一个渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);


        // 把坐标轴显示出来
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);


        // 创建一个平面
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);


        //旋转平面的位置因为默认是与x轴平行的
        plane.rotation.x = 1.5 * Math.PI;//-1.5到到0.5其实是一样的反向的问题
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;


        // 添加到场景中去
        scene.add(plane);


        // 创建一个方块
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);


        // 方块的位置
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;


        // 将它添加到场景中去
        scene.add(cube);


        // 创建一个球球
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true})//默认材质待会儿还要制定
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);


        // 球球的位置·
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;


        //添加一个球球
        scene.add(sphere);


        // 相机放在哪里其实就是从哪个位置看
        camera.position.x = ..-30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

// 添加光照效果但是没有材质的话没啥区别
var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // 获取上下问创建一个渲染的位置
        document.getElementById("WebGL-output").appendChild(renderer.domElement);


        //渲染场景
        renderer.render(scene, camera);
    }
    window.onload = init;