threejs学习笔记03---网格

最新推荐文章于 2023-11-14 13:39:49 发布

weixin_30784141

最新推荐文章于 2023-11-14 13:39:49 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Webyangbowen/p/8058861.html

本文介绍如何利用Three.js这一流行的3D图形库，在网页上实现一个简单的3D线条效果。通过设置HTML和CSS样式，加载Three.js库，并定义相机、场景、光源及线条对象，最终渲染出交互式的3D视觉体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div id="canvas-frame"></div>
<script src="js/three.js"></script>
<script>
    //定义一些需要的变量
    var renderer, camera, scene, light, object;
    var width, height;
    //初始化three
    function initThree(){
        width = document.getElementById('canvas-frame').clientWidth;
        height=document.getElementById('canvas-frame').clientHeight;
        renderer= new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF, 1.0);
    }
    //定义相机
    function initCamera(){
        camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
        camera.position.x=0;
        camera.position.y=1000;
        camera.position.z=0;
        camera.up.x=0;
        camera.up.y=0;
        camera.up.z=1;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }
    //定义场景
    function initScene(){
        scene = new THREE.Scene();
    }
    //定义灯光
    function initLight(){
        light = new THREE.DirectionalLight(0xFF0000,1.0,0);
        light.position.set(100,100,200);
        scene.add(light);
    }
    var cube;
    function initObject(){
        var geometry = new THREE.Geometry();
        geometry.vertices.push( new THREE.Vector3(-500,0,0));
        geometry.vertices.push( new THREE.Vector3(500,0,0));

        for(var i = 0;i<=20;i++){
                var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
                line.position.z=(i*50)-500;
                scene.add(line);

                var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
                line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add( line );
        }

    }
    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene, camera);
    }
    window.onload = threeStart();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Webyangbowen/p/8058861.html