threejs正方体六面贴图

最新推荐文章于 2024-02-08 23:01:47 发布

吃饭了吗

最新推荐文章于 2024-02-08 23:01:47 发布

阅读量1.1k

点赞数 2

文章标签： three.js 纹理贴图

本文链接：https://blog.csdn.net/weixin_41824429/article/details/120120365

版权

该博客介绍了如何使用Three.js库在网页中创建一个六面分别贴有不同的纹理图像的正方体。通过加载纹理图片、定义材质、构建几何体和设置光源，实现了3D正方体的动态旋转展示。示例代码中包含了HTML和JavaScript的实现细节，适合对WebGL和Three.js感兴趣的读者学习。

摘要由CSDN通过智能技术生成

给正方体六面贴上不同纹理

最终效果
在这里插入图片描述

目录结构
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./three.min.js"></script>
    <script src="./main.js"></script>

</body>
</html>

main.js文件

var scene = new THREE.Scene();

var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大

//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(100, 200, 250); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)


 

var loader = new THREE.TextureLoader();
var geometry = new THREE.BoxGeometry(30, 30, 30);
// 换成自己的图片路径
let one = loader.load( './img/1.jpg');
let two = loader.load( './img/2.jpg');
let three = loader.load( './img/3.png');
let four = loader.load( './img/4.jpg');
let five = loader.load( './img/5.png');
let six = loader.load( './img/6.png');

const material1 = new THREE.MeshBasicMaterial( { map: one} );
const material2 = new THREE.MeshBasicMaterial( { map: two} );
const material3 = new THREE.MeshBasicMaterial( { map: three} );
const material4 = new THREE.MeshBasicMaterial( { map: four} );
const material5 = new THREE.MeshBasicMaterial( { map: five} );
const material6 = new THREE.MeshBasicMaterial( { map: six} );

const materials = [material1,material2,material3,material4,material5,material6]

const dice = new THREE.Mesh(geometry, materials);
scene.add(dice);
 

// 光源
var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light
scene.add(light);

var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
spotLight.position.set( 100, 1000, 1000 );
spotLight.castShadow = true;
scene.add(spotLight);

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

function draw() {
    dice.rotation.x += 0.01;
    dice.rotation.y += 0.01;    
    renderer.render(scene, camera);  
    stop = requestAnimationFrame(draw);
    
}

draw();