使用three.js创建一个正方体

小江江12

已于 2022-12-01 17:56:21 修改

阅读量870

点赞数

分类专栏：配置 js 前端文章标签： javascript 前端 servlet

于 2022-08-04 18:23:40 首次发布

本文链接：https://blog.csdn.net/qq_39966730/article/details/126163003

版权

js 同时被 3 个专栏收录

68 篇文章 11 订阅

订阅专栏

前端

61 篇文章 0 订阅

订阅专栏

配置

3 篇文章 0 订阅

订阅专栏

我们想透过摄像机渲染出一个场景，需要用到场景、相机和渲染器。
场景：new THREE.Scene()
相机：new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );//对应参数意思为视野角度（FOV），近截面（near）和远截面（far）
渲染器：new THREE.WebGLRenderer()

它主要包含三个部分camera,scene,renderer(场景、相机和渲染器)
主要如下图：


其中场景中会有物体和物体的一些属性，需要把属性和物体融合在一起
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
融合后的物体加到场景中scene.add( mesh );
camera,scene最终会被renderer进行渲染renderer.render(scene, camera);
渲染器需要加载到窗口中进行显示
document.body.appendChild( renderer.domElement );

<html>
<head>
    <meta charSet="utf-8">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<script src="./three.js"></script>
<script>
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    };

    animate();
</script>
</body>
</html>