75 lines
No EOL
2.1 KiB
HTML
75 lines
No EOL
2.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>TEST THREE</title>
|
|
<script src="C:/Users/0425-DESKTOP-PC/Downloads/three.js-master/three.js-master/build/three.js"></script>
|
|
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
|
|
<style>
|
|
body{ margin: 0 }
|
|
canvas { width: 100%, height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var camera, scene, renderer;
|
|
var container;
|
|
|
|
init();
|
|
render();
|
|
|
|
function init(){
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
//make camera
|
|
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);
|
|
camera.position.set(0,0,10); //changing y will change position
|
|
|
|
//make scene
|
|
scene = new THREE.Scene();
|
|
|
|
//renderer
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
container.appendChild(renderer.domElement);
|
|
|
|
//plane for the ground
|
|
var planeGeometry = new THREE.PlaneBufferGeometry( 10, 20, 32);
|
|
var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00});
|
|
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
|
|
plane.position.set(0, 0, -1);
|
|
scene.add( plane );
|
|
|
|
//set ambient lighting
|
|
var ambient = new THREE.AmbientLight( 0x1001030 );
|
|
scene.add( ambient );
|
|
|
|
//set another light
|
|
var spotLight = new THREE.SpotLight(0xffffff);
|
|
spotLight.position.set(100, -100, 100);
|
|
spotLight.castShadow = true;
|
|
spotLight.shadowMapWidth = 1024;
|
|
spotLight.shadowMapHeight = 1024;
|
|
spotLight.shadowCameraNear = 500;
|
|
spotLight.shadowCameraFar = 4000;
|
|
spotLight.shadowCameraFov = 30;
|
|
scene.add(spotLight);
|
|
|
|
//obj file
|
|
var loader = new THREE.OBJLoader();
|
|
loader.load(
|
|
'C:/Users/0425-DESKTOP-PC/Downloads/trees.obj',
|
|
function(object){
|
|
object.scale.set(0.5, 0.5, 0.5);
|
|
object.rotation.x = 180;
|
|
scene.add(object);
|
|
}
|
|
);
|
|
}
|
|
|
|
function render(){
|
|
requestAnimationFrame(render);
|
|
renderer.render(scene, camera);
|
|
}
|
|
</script>
|
|
</body> |