master

分支 (1)

管理

管理

master

threed-tutorial
/
06.PerspectiveCamera.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>06.PerspectiveCamera</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script src="build/three.js"></script>
    <script>
        //生成场景
        const scene = new THREE.Scene();
        //设置相机
        const aspect=window.innerWidth / window.innerHeight; //宽高比
        const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
        camera.position.z = 20;
        //设置渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        //生成模型
        const geometry = new THREE.TorusGeometry(2, 1, 16, 20);;
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        //POINTS
        const points = new THREE.Points(geometry, new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 }));
        //Mesh
        const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
        //LINE_STRIP
        const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
            color: 0xffffff,
            linewidth: 1
        }))
        //LINE_LOOP
        const lineLoop = new THREE.LineLoop(geometry, new THREE.LineBasicMaterial({
            color: 0xffffff,
            linewidth: 1
        }));
        //LINES
        const lineSegments = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial({
            color: 0xffffff,
            linewidth: 1
        }));
        //设置场景
        points.position.set(-20, 0, 0);
        mesh.position.set(-10, 0, 0);
        line.position.set(0, 0, 15);
        lineLoop.position.set(10, 0, 0);
        lineSegments.position.set(20, 0, 0);
        scene.add(points);
        scene.add(mesh);
        scene.add(line);
        scene.add(lineLoop);
        scene.add(lineSegments);
        //渲染场景
        renderer.render(scene, camera);
    </script>
</body>

</html>