02-THREE.JS 輔助線使用

本文轉載自查看原文 2018-10-29 18:41 645 THREEJS

<!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軸是藍色

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 three.js入門系列之視角和輔助線 echarts去掉輔助線做輔助線的方法 Axure 全局輔助線(轉) Scene視圖輔助線繪制 vscode設置垂直長度輔助線 Threejs之網格輔助線GridHelper PS如何精確設置參考線，標尺，輔助線 VS中行號對齊的輔助線（虛線）去除 highcharts實現畫輔助線功能並刪除