当前位置：网站首页>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>
边栏推荐
- 一大波开源小抄来袭
- numpy---基础学习笔记
- 【數字IC驗證快速入門】20、SystemVerilog學習之基本語法7（覆蓋率驅動...內含實踐練習）
- [quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
- ./ Functions of configure, make and make install
- Basic knowledge sorting of mongodb database
- Mesh merging under ue4/ue5 runtime
- Use cpolar to build a business website (2)
- Starting from 1.5, build a microservice framework link tracking traceid
- [original] all management without assessment is nonsense!
猜你喜欢
OpenGL's distinction and understanding of VAO, VBO and EBO
【数字IC验证快速入门】26、SystemVerilog项目实践之AHB-SRAMC（6）（APB协议基本要点）
Use cpolar to build a business website (2)
![[quick start of Digital IC Verification] 24. AHB sramc of SystemVerilog project practice (4) (AHB continues to deepen)](/img/cf/45775b712f60869186a25d3657ee1b.png)
[quick start of Digital IC Verification] 24. AHB sramc of SystemVerilog project practice (4) (AHB continues to deepen)
webgl_ Graphic transformation (rotation, translation, zoom)
Introduction of mongod management database method
Create lib Library in keil and use lib Library
webgl_ Enter the three-dimensional world (1)
postman生成时间戳，未来时间戳
Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc
随机推荐
Gd32 F3 pin mapping problem SW interface cannot be burned
[quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
Super simple and fully automated generation super signature system (cloud Xiaoduo minclouds.com cloud service instance), free application in-house test app distribution and hosting platform, maintenan
Numpy -- epidemic data analysis case
Asynchronous application of generator function
webgl_ Graphic transformation (rotation, translation, zoom)
postman生成时间戳，未来时间戳
numpy---基础学习笔记
2. Heap sort "hard to understand sort"
Virtual memory, physical memory /ram what
Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc
【数字IC验证快速入门】23、SystemVerilog项目实践之AHB-SRAMC（3）（AHB协议基本要点）
[original] all management without assessment is nonsense!
Vertex shader to slice shader procedure, varying variable
Write sequence frame animation with shader
Annexb and avcc are two methods of data segmentation in decoding
Nacos conformance protocol cp/ap/jraft/distro protocol
Pit avoidance: description of null values in in and not in SQL
The bank needs to build the middle office capability of the intelligent customer service module to drive the upgrade of the whole scene intelligent customer service
招标公告：2022年云南联通gbase数据库维保公开比选项目（第二次）比选公告