效果1:
代码1:obj模型
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AxesHelper, DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";
import{MTLLoader} from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from "three/examples/jsm/loaders/OBJLoader"
var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色
window.addEventListener("resize", () => {//窗口大小变化事件
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
//设置了aspect 必须更新相机的投影矩阵
camera.updateProjectionMatrix();
})
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
scene.add(new AxesHelper(1000));
update()
function update() {
console.log('刷新')
renderer.render(scene, camera);
requestAnimationFrame(update);//不会卡塞,专门针对图形渲染刷新的方法
}
var objLoader=new OBJLoader();
var mtlLoader=new MTLLoader();
objLoader.load("../assets/models/obj/male02.obj",(obj)=>{
scene.add(obj);
});
效果2:
代码2:obj模型加mtl材质
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AxesHelper, DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";
import{MTLLoader} from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from "three/examples/jsm/loaders/OBJLoader"
var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色
window.addEventListener("resize", () => {//窗口大小变化事件
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
//设置了aspect 必须更新相机的投影矩阵
camera.updateProjectionMatrix();
})
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);
scene.add(new AxesHelper(1000));
update()
function update() {
console.log('刷新')
renderer.render(scene, camera);
requestAnimationFrame(update);//不会卡塞,专门针对图形渲染刷新的方法
}
var objLoader=new OBJLoader();
var mtlLoader=new MTLLoader();
mtlLoader.load("../assets/models/obj/male02.mtl",(materials)=>{
objLoader.setMaterials(materials);
objLoader.load("../assets/models/obj/male02.obj",(obj)=>{
scene.add(obj);
});
})
效果3:
代码3:gltf模型/glb模型
import{GLTFLoader}from "three/examples/jsm/loaders/GLTFLoader"
var gltfLoader=new GLTFLoader();
gltfLoader.load("../assets/models/glTF/DamagedHelmet.gltf",(gltf)=>{
scene.add(gltf.scene);
});
import{GLTFLoader}from "three/examples/jsm/loaders/GLTFLoader"
var gltfLoader=new GLTFLoader();
gltfLoader.load("../assets/models/glTF/wuren.glb",(glb)=>{
glb.scene.x=-10;
scene.add(glb.scene);
});
效果4:
threejs编辑器转gltf格式,修改模型的大小
var gltfLoader=new GLTFLoader();
gltfLoader.load("../assets/models/yao.gltf",(gltf1)=>{
scene.add(gltf1.scene);
for (var i = 0; i <gltf1.scene.children[0].children.length; i++) {
var child=gltf1.scene.children[0].children[i];
console.log(child.name);
if (child.name=="glassLed_headlight_1") {
//----------------设置玻璃的材质,添加环境反射---------------
child.material=new THREE.MeshPhongMaterial();
child.material.color=new THREE.Color(0x333333);
child.material.transparent=true;
child.material.opacity=0.2;
child.material.envMap=new THREE.TextureLoader().load("textures/desert.jpg");
child.material.envMap.mapping=THREE.EquirectangularReflectionMapping;
child.material.envMap.envMapInstensity=1;
}
}
//----------------设置模型的大小,旋转和位置---------------------
gltf1.scene.scale.set(0.05,0.05,0.05);
gltf1.scene.rotation.set(-90,0,-90);
gltf1.scene.position.set(0,-5,-2);
});
设置贴图
for(var i=0;i<gltf.scene.children[0].children.length;i++){
var modelObj = gltf.scene.children[0].children[i];
if(modelObj.name=="smart_lungu0"||modelObj.name=="smart_lungu1"||modelObj.name=="smart_lungu2"||modelObj.name=="smart_lungu3"){
modelObj.material = new THREE.MeshStandardMaterial();
modelObj.material.map = allTexture["lungu_col"].texture;
modelObj.material.normalMap = allTexture["lungu_nor"].texture;
modelObj.material.aoMap = allTexture["lungu_occ"].texture;
}
}
代码4:dae文件
import{ColladaLoader}from "three/examples/jsm/loaders/ColladaLoader"
var daeLoader=new ColladaLoader();
daeLoader.load("../assets/models/dae/elf.dae",(dae)=>{
scene.add(dae.scene);
});
效果5:
代码5:加载fbx模型
import{FBXLoader}from "three/examples/jsm/loaders/FBXLoader"
var fbxLoader=new FBXLoader();
fbxLoader.load("../assets/models/stanfordbunny.fbx",(obj)=>{
obj.scale.set(1/1000,1/1000,1/1000);
scene.add(obj);
});