threejs正方体六面贴图
生活随笔
收集整理的這篇文章主要介紹了
threejs正方体六面贴图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
給正方體六面貼上不同紋理
最終效果
目錄結構
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();總結
以上是生活随笔為你收集整理的threejs正方体六面贴图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H5+ 常用API(拨打电话,设备震动,
- 下一篇： pentaho saiku 安装全过程