当前位置:网站首页>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>
边栏推荐
- 持续创作,还得靠它!
- Summary of knowledge points of xlua hot update solution
- 【数字IC验证快速入门】19、SystemVerilog学习之基本语法6(线程内部通信...内含实践练习)
- 山东老博会,2022中国智慧养老展会,智能化养老、适老科技展
- numpy--疫情数据分析案例
- Spin animation of Cocos performance optimization
- Ida Pro reverse tool finds the IP and port of the socket server
- A wave of open source notebooks is coming
- [wechat applet] Chapter (5): basic API interface of wechat applet
- Configure mongodb database in window environment
猜你喜欢
HW primary flow monitoring, what should we do
Implementation of crawling web pages and saving them to MySQL using the scrapy framework
Getting started with webgl (2)
喜讯!科蓝SUNDB数据库与鸿数科技隐私数据保护管理软件完成兼容性适配
webgl_ Enter the three-dimensional world (1)
When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
Streaming end, server end, player end
【数字IC验证快速入门】23、SystemVerilog项目实践之AHB-SRAMC(3)(AHB协议基本要点)
Shipping companies' AI products are mature, standardized and applied on a large scale. CIMC, the global leader in port and shipping AI / container AI, has built a benchmark for international shipping
Asynchronous application of generator function
随机推荐
webgl_ Graphic transformation (rotation, translation, zoom)
Asynchronous application of generator function
招标公告:福建省农村信用社联合社数据库审计系统采购项目(重新招标)
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
AB package details in unity (super detail, features, packaging, loading, manager)
航運船公司人工智能AI產品成熟化標准化規模應用,全球港航人工智能/集裝箱人工智能領軍者CIMC中集飛瞳,打造國際航運智能化標杆
[Lanzhou University] information sharing of postgraduate entrance examination and re examination
【数字IC验证快速入门】24、SystemVerilog项目实践之AHB-SRAMC(4)(AHB继续深入)
./ Functions of configure, make and make install
The "go to definition" in VS2010 does not respond or prompts the solution of "symbol not found"
Nacos conformance protocol cp/ap/jraft/distro protocol
Implementation of crawling web pages and saving them to MySQL using the scrapy framework
Detailed explanation of unity hot update knowledge points and introduction to common solution principles
航天宏图信息中标乌鲁木齐某单位数据库系统研发项目
Learn good-looking custom scroll bars in 1 minute
webgl_ Enter the three-dimensional world (1)
Three. JS introductory learning notes 04: external model import - no material obj model
Zhongang Mining: Fluorite continues to lead the growth of new energy market
从 1.5 开始搭建一个微服务框架链路追踪 traceId
Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc