初识Three.js

生成一个三角形

参考链接

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
</head>
 
<body>
    <script type="module">
        // 引入three.js
        import * as THREE from 'https://unpkg.com/three/build/three.module.js';
 
        // Our Javascript will go here.
        // 创建一个渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器的大小
        renderer.setSize( window.innerWidth, window.innerHeight );
        // 将渲染器的实际渲染元素（也就是canvas）添加到body中
        document.body.appendChild( renderer.domElement );
 
        // 创建一个相机（透视相机）
        const camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 500 );
        // 设置相机的初始位置
        camera.position.set( 0, 0, 100 );
        // 设置相机的朝向（这里也就是上100的高度看向原点）
        camera.lookAt( 0, 0, 0 );
 
        // 创建一个场景
        const scene = new THREE.Scene();
 
        // 创建线条基本材质
        const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
        const points = [];
        points.push( new THREE.Vector3( - 10, 0, 0 ) ); // 三角形的左下角
        points.push( new THREE.Vector3( 0, 10, 0 ) );   // 三角形的顶点
        points.push( new THREE.Vector3( 10, 0, 0 ) );   // 三角形的右下角
        points.push( new THREE.Vector3( -10, 0, 0 ) );  // 回到三角形的左下角
 
        // 通过点创建线条
        // BufferGeometry 用于创建一个无顶点索引的几何体对象
        const geometry = new THREE.BufferGeometry().setFromPoints( points );
        // 通过线条基本材质和线条几何体创建线条
        const line = new THREE.Line( geometry, material );
        // 将线条添加到场景中
        scene.add( line );
        // 渲染场景
        renderer.render( scene, camera );
    </script>
</body>
 
</html>
posted @   脆皮鸡  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
·  设计一个函数等待三秒/指定时间后后再继续执行
·  常见的 JavaScript 设计模式
·  Threejs：创建文字
·  threejs创建圆柱体
·  网页3D效果库Three.js初窥
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae