当前位置：网站首页>Three. JS introductory learning notes 19: how to import FBX static model
Three. JS introductory learning notes 19: how to import FBX static model
2022-07-07 15:51:00 【Jiang Duoduo_ Mostly Harmless 】
Reference material ：https://www.jianshu.com/p/906072e60197
1. stay JS The following two files are introduced in
<script type="text/javascript" src="js/FBXLoader.js"></script>
<script type="text/javascript" src="js/inflate.min.js"></script>
2. introduce fbx file ,fbx The file is placed in the same level folder of the page 
var loader = new THREE.FBXLoader();
loader.load("fbx/dijifbx.FBX", function(objectBottom) {
objectBottom.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
objectBottom.scale.multiplyScalar(0.5);//0.5 Multiple size
objectBottom.position.set(0,0,0);
objectBottom.rotation.y = -Math.PI;// rotate 180 degree
scene.add(objectBottom);
});
Complete code record
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
<!-- The adaptive -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/FBXLoader.js"></script>
<script type="text/javascript" src="js/inflate.min.js"></script>
<script type="text/javascript" src="js/DirectionalLightHelper.js"></script>
<script>
var stats, light;
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;// Intersecting
var radius = 100, theta = 0;
init();
animate();
function init() {
// init scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(12, 13, 12);
// camera.lookAt( scene.position );
camera.lookAt( new THREE.Vector3(0, 0, 0));
scene.add(camera);
//light
light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 5, 10, 16 ).normalize();
// Vector attribute vector is converted to unit vector , Set the direction to be the same as the original vector , The length is 1
light.intensity=1.2;// Strength
scene.add(light);
// base
var loader = new THREE.FBXLoader();
loader.load("fbx/dijifbx.FBX", function(objectBottom) {
objectBottom.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
objectBottom.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
objectBottom.position.set(0,0,0);
objectBottom.rotation.y = -Math.PI;// rotate 180 degree
scene.add(objectBottom);
});
// Machine tool
var loader = new THREE.FBXLoader();
loader.load("fbx/5000fbxnew.FBX", function(object1) {
object1.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
object1.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
object1.position.set(-3,-4,-3);
object1.rotation.x = -Math.PI*0.5;// rotate 180 degree
object1.rotation.z = Math.PI;
scene.add(object1);
});
var loader = new THREE.FBXLoader();
loader.load("fbx/7000fbxnew.FBX", function(object2) {
object2.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
object2.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
object2.position.set(4,-5.8,-3);
object2.rotation.x = -Math.PI*0.5;// rotate 180 degree
object2.rotation.z = Math.PI;
scene.add(object2);
});
// Van
var loader = new THREE.FBXLoader();
loader.load("fbx/xuanzhuanbanyuenche.FBX", function(object3) {
object3.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
object3.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
object3.position.set(0,0,4.2);
// objectBottom.rotation.x = -Math.PI;// rotate 180 degree
scene.add(object3);
});
// ray
raycaster = new THREE.Raycaster();
/* var raycaster = new THREE.Raycaster(); var mouseVector = new THREE.Vector3();*/
//renderer
renderer = new THREE.WebGLRenderer({
antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
// monitor
document.addEventListener( "mousedown", onDocumentMouseDown, false );
// Window changes
window.addEventListener( "resize", onWindowResize, false );
// plug-in unit
var controls = new THREE.OrbitControls( camera, renderer.domElement );//camera and render The variable of is consistent with the variable set by the camera and renderer
// If you use animate When the method is used , Delete this function
//controls.addEventListener( 'change', render );
// Make the animation rotate or damp when cycling Does the meaning have inertia
controls.enableDamping = true;
// Dynamic damping coefficient It's the mouse drag rotation sensitivity
//controls.dampingFactor = 0.25;
// Can I zoom
controls.enableZoom = true;
// Whether to rotate automatically
controls.autoRotate = true;
// Set the maximum distance from the camera to the origin
controls.minDistance = 1;
// Set the maximum distance from the camera to the origin
controls.maxDistance = 200;
// Whether to turn on right-click drag and drop
controls.enablePan = true;
}//function end
// Window changes
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
// camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// Coordinate transformation
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// Update the ray with camera and mouse position
raycaster.setFromCamera( mouse, camera );
// Calculate the focus of objects and rays
var intersects = raycaster.intersectObjects( scene.children ,true);
if ( intersects.length > 0 ) {
// When there are objects
if ( INTERSECTED != intersects[ 0 ].object ) {
// The last selection is not equal to the current selection , It's time to replace ,intersects[ 0 ] Is the current selection At the front , It is automatically sorted
if ( INTERSECTED )
if( INTERSECTED.material .length==undefined){
INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );// The last selected material should be replaced with the original material
}
INTERSECTED = intersects[ 0 ].object;
if( INTERSECTED.material .length==undefined){
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();// Save the current materials
INTERSECTED.material.emissive.setHex( 0xff0000 );// Color change
}
}
} else {
// When selecting the blank space
//
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
边栏推荐
- 15. Using the text editing tool VIM
- Async and await
- UE4 exports the picture + text combination diagram through ucanvasrendertarget2d
- L'application à l'échelle de la normalisation mature des produits ai des compagnies maritimes, cimc, leader mondial de l'intelligence artificielle portuaire et maritime / intelligence artificielle des
- Use cpolar to build a business website (2)
- Streaming end, server end, player end
- Apache Doris刚“毕业”：为什么应关注这种SQL数据仓库？
- Mesh merging under ue4/ue5 runtime
- unnamed prototyped parameters not allowed when body is present
- Clang compile link ffmpeg FAQ
猜你喜欢
LeetCode1_ Sum of two numbers
2. Heap sort "hard to understand sort"
讲师征集令 | Apache SeaTunnel（Incubating） Meetup 分享嘉宾火热招募中！
Virtual memory, physical memory /ram what
Three. JS introductory learning notes 10:three JS grid
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
Getting started with webgl (4)
numpy--数据清洗
![[quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)](/img/91/16a370ac41adc8fe31507765a82b0a.png)
[quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
![[wechat applet] Chapter (5): basic API interface of wechat applet](/img/63/e819113c7c93e273525bc850892972.png)
[wechat applet] Chapter (5): basic API interface of wechat applet
随机推荐
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
Three. JS introductory learning notes 04: external model import - no material obj model
2. Heap sort "hard to understand sort"
Oracle control file loss recovery archive mode method
Annexb and avcc are two methods of data segmentation in decoding
Numpy --- basic learning notes
[quick start of Digital IC Verification] 19. Basic grammar of SystemVerilog learning 6 (thread internal communication... Including practical exercises)
Keil5 does not support online simulation of STM32 F0 series
Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc
C Alibaba cloud OSS file upload, download and other operations (unity is available)
AB package details in unity (super detail, features, packaging, loading, manager)
神经网络c语言中的指针是怎么回事
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
Gd32 F3 pin mapping problem SW interface cannot be burned
从 1.5 开始搭建一个微服务框架链路追踪 traceId
过度依赖补助，大客户收款难，冲刺“国产数据库第一股”的达梦后劲有多足？
【数字IC验证快速入门】26、SystemVerilog项目实践之AHB-SRAMC（6）（APB协议基本要点）
LeetCode2_ Add two numbers
Syntax of generator function (state machine)
Asynchronous application of generator function