Three.js官网案例001—旋转的纹理盒子

樱桃园园长

于 2024-05-30 21:04:20 发布

阅读量185

点赞数 4

分类专栏： Three.js官网案例文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_46056472/article/details/139334279

版权

Three.js官网案例专栏收录该内容

1 篇文章 1 订阅

订阅专栏

今日份案例是使用Three.js创建一个旋转的纹理盒子。Three.js是一个强大的WebGL库，可以帮助我们在网页中创建3D场景。让我们一步步来看代码。具体效果如下：

首先：我们需要导入Three.js库以及初始化场景、相机、渲染器：

scene = new THREE.Scene()

camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(2,2,2)
scene.add(camera)

renderer = new THREE.WebGLRenderer({antialias:true})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)

然后：创建一个盒子，并给这个盒子添加材质

const texture = new THREE.TextureLoader().load('textures/crate.gif')
const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({map:texture})
mesh = new THREE.Mesh(geometry,material)

最后：在render函数中设置分别绕x轴和y轴旋转

mesh.rotateY(0.005)
mesh.rotateX(0.005)

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转的纹理盒子</title>
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
    <script type="importmap">
        {
            "imports": {
                "three":"./build/three.module.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        let scene, camera, renderer,control
        let mesh
        initScene()
        render()
        function initScene() {
            scene = new THREE.Scene()

            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000)
            camera.position.set(2,2,2)
            scene.add(camera)

            renderer = new THREE.WebGLRenderer({antialias:true})
            renderer.setPixelRatio(window.devicePixelRatio)
            renderer.setSize(window.innerWidth,window.innerHeight)

            control = new OrbitControls(camera, renderer.domElement)

            // scene.add(new THREE.AxesHelper(100))
            document.body.appendChild(renderer.domElement)
            const texture = new THREE.TextureLoader().load('textures/crate.gif')
            const geometry = new THREE.BoxGeometry(1,1,1)
            const material = new THREE.MeshBasicMaterial({map:texture})
            mesh = new THREE.Mesh(geometry,material)
            scene.add(mesh)

            
            window.addEventListener('resize', onWindowResize)
        }

        function render() {
            requestAnimationFrame(render);
            mesh.rotateY(0.005)
            mesh.rotateX(0.005)
            renderer.render(scene, camera)
        }


        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>