Three.js入门（一）渲染并查看三维对象

作者: yuriy0_0 | 来源:发表于2018-06-11 20:16 被阅读0次

Three.js入门（一）渲染并查看三维对象
三维技术探索-Three.js开发指南
Three.js学习规划
01、渲染并展示三维对象
Metal入门教程（四）灰度计算
使用three.js的基本组件
基于three.js 动态模型绘制欧拉角旋转问题分析
Metal入门教程总结
Metal入门教程（七）天空盒全景
Metal入门教程（八）Metal与OpenGL ES交互

html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic</title>
    <script src="../lib/three.js"></script>
    <style>
        body{
            margin:0;
            overflow:hidden;
        }

    </style>
</head>
<body>
    <!--div which will hold the Output-->
    <div id="WebGL-output">
    </div>
    <!--javacript code that runs our three.js example-->
    <script>
        function init(){
        };
        window.onload=init;
    </script>
</body>
</html>

 function init(){
            var scene  = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45,window.innerHeight/window.innerWidth,0.1,1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth,window.innerHeight);

            var axes = new THREE.AxesHelper(20);
            scene.add(axes);

            var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
            var planeMeterial = new THREE.MeshBasicMaterial({color:0xcccccc});

            var plane = new THREE.Mesh(planeGeometry,planeMeterial);

            plane.rotation.x=-0.5*Math.PI;
            plane.position.x=15;
            plane.position.y=0;
            plane.position.z=0;

            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4,4,4);
            var cubeMeterial = new THREE.MeshBasicMaterial({color:0xff000,wireframe:true});
            var cube = new THREE.Mesh(cubeGeometry,cubeMeterial);

            cube.position.x=-4;
            cube.position.y=3;
            cube.position.z=0;

            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4,20,20);
            var sphereMeterial = new THREE.MeshBasicMaterial({color:0x7777ff,wireframe:true});
            var sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);

            sphere.position.x=20;
            sphere.position.y=4;
            sphere.position.z=2;

            scene.add(sphere);

            camera.position.x=-60;
            camera.position.y=80;
            camera.position.z=60;

            camera.lookAt(scene.position);

            document.getElementById("WebGL-output").appendChild(renderer.domElement);
            renderer.render(scene,camera);

        };
        window.onload=init();

屏幕快照 2018-06-11 下午8.02.51.png