码迷,mamicode.com
首页 > Web开发 > 详细

02-THREE.JS辅助线使用

时间:2018-10-29 20:11:48      阅读:420      评论:0      收藏:0      [点我收藏+]

标签:scene   onload   WebG   web   over   axis   document   tput   end   

<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>


<div id="WebGL-output">
</div>


<script type="text/javascript">

    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);

       

        // 相机坐标设置
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // 添加到DOM元素里面
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

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

</script>
</body>
</html>

X轴是红色. Y轴是绿色. Z轴是蓝色

技术分享图片

 

02-THREE.JS辅助线使用

标签:scene   onload   WebG   web   over   axis   document   tput   end   

原文地址:https://www.cnblogs.com/shuaihan/p/9872442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!