<!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).
