'Load an obj file using ThreeJS
<!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>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="https://meadowdecor.jackzc.com/smple/node_modules/three/build/three.min.js"></script>
<script src="https://meadowdecor.jackzc.com/smple/node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="https://meadowdecor.jackzc.com/smple/node_modules/three/examples/js/controls/TrackballControls.js"></script>
<script src="https://meadowdecor.jackzc.com/smple/node_modules/three/examples/js/loaders/OBJLoader.js"></script>
<script>
const height = window.innerHeight;
const width = window.innerWidth;
const texture_file = 'https://meadowdecor.jackzc.com/smple/source/texture.jpg';
const model_file = 'https://meadowdecor.jackzc.com/smple/source/5.obj';
/**
* Generate a scene object with a background color
**/
function createScene() {
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);
return scene;
}
/**
* Generate the camera to be used in the scene. Camera args:
* [0] field of view: identifies the portion of the scene
* visible at any time (in degrees)
* [1] aspect ratio: identifies the aspect ratio of the
* scene in width/height
* [2] near clipping plane: objects closer than the near
* clipping plane are culled from the scene
* [3] far clipping plane: objects farther than the far
* clipping plane are culled from the scene
**/
function createCamera() {
const aspectRatio = width / height;
const camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000);
camera.position.set(0, 1, 10);
return camera;
}
/**
* Generate the light to be used in the scene. Light args:
* [0]: Hexadecimal color of the light
* [1]: Numeric value of the light's strength/intensity
* [2]: The distance from the light where the intensity is 0
* @param {obj} scene: the current scene object
**/
function createLights(scene) {
const light1 = new THREE.PointLight(0xffffff, 1, 0);
light1.position.set(1, 1, 1);
scene.add(light1);
// An ambient light
const light2 = new THREE.AmbientLight(0x111111);
scene.add(light2);
}
/**
* Generate the renderer to be used in the scene
**/
function createRenderer() {
// Create the canvas with a renderer
const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
// Add support for retina displays
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor("#fff");
// Specify the size of the canvas
renderer.setSize(width, height);
// Add the canvas to the DOM
document.body.appendChild(renderer.domElement);
return renderer;
}
/**
* Generate the controls to be used in the scene
* @param {obj} camera: the three.js camera for the scene
* @param {obj} renderer: the three.js renderer for the scene
**/
function createControls(camera, renderer) {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.zoomSpeed = 0.4;
controls.panSpeed = 0.4;
return controls;
}
function createTexture() {
var texture_loader = new THREE.TextureLoader();
var texture = texture_loader.load(texture_file);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
texture.needsUpdate = true;
}
/**
* Load object
**/
function loadModel() {
const loader = new THREE.OBJLoader();
loader.load(model_file, function (object) {
// object.rotation.z = Math.PI;
// object.scale.set(2,2,2);
// object.position.set(1, 1, 1);
object.frustumCulled = false;
scene.add(object);
});
}
/**
* Render!
**/
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
};
//==========================================================================================//
var scene = createScene();
var camera = createCamera();
var renderer = createRenderer();
var controls = createControls(camera, renderer);
createLights(scene);
loadModel(scene);
render();
</script>
</body>
</html>Just starting to learn ThreeJS, I downloaded an obj file and tried to load it into a web page using ThreeJS, it worked! However, it works not the way I want, I expect the object shows in the middle of my screen, but it doesn't. I have to hold the left button on the mouse and drag it to the right, then the object shows! And it's smaller than I expected!
Here is the code below, and as I said before, I am very new toThreeJS, I spent 2 days trying to figure this out and I failed. THANK YOU for any kind of help.
PS:
- Here is the obj file I am using: Download it from my Google Drive
- I try to upload this obj file into some online 3D reviewer programs, and it shows very well!
Update:
The model behaves like it uses my mouse coordinate as its origin, but with a distance. Click here to see the effect (you have to hold the left button on your mouse and move it to find the model).
Solution 1:[1]
Firstly, to solve the object being too small, you can scale it:
model.scale.set(2, 2, 2); //Double
For not being centered, your model might not be at the origin (when it was created). You can either fix the model, or change the model's position in three.js using model.position. If your object is not showing up properly, the try adding:
object.frustumCulled = false;
That should do it~
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |