JustinSDK/first_three_js.html

## first_three_js.html
<html>
    <body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script>
    // 場景
    const scene = new THREE.Scene();

    // 燈光
    let pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(10, 10, -10);
    scene.add(pointLight);

    // 相機
    const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        100
    );
    camera.position.set(10, 10, 10)
    camera.lookAt(scene.position);

    // 方塊 Mesh
    const geometry = new THREE.BoxGeometry(5, 5, 5)
    const material = new THREE.MeshNormalMaterial();
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(0, 0, 0);
    scene.add(cube);

    // 地板
    const planeGeometry = new THREE.PlaneGeometry(30, 30);
    const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(0, -3, 0);
    scene.add(plane);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor(0xeeeeee, 1.0)
    renderer.shadowMap.enable = true

    document.body.appendChild(renderer.domElement);

    // 軌道控制器
    const cameraControl = new THREE.OrbitControls(camera);
    cameraControl.enableDamping = true;
    cameraControl.dampingFactor = 0.25;
    cameraControl.autoRotate = false;

    // 動畫更新
    function render() {
        requestAnimationFrame(render)
        cameraControl.update()
        renderer.render(scene, camera)
    }

    render();
</script>

    </body>
</html>
	<html>
	<body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

	<script>
	// 場景
	const scene = new THREE.Scene();

	// 燈光
	let pointLight = new THREE.PointLight(0xffffff);
	pointLight.position.set(10, 10, -10);
	scene.add(pointLight);

	// 相機
	const camera = new THREE.PerspectiveCamera(
	45,
	window.innerWidth / window.innerHeight,
	0.1,
	100
	);
	camera.position.set(10, 10, 10)
	camera.lookAt(scene.position);

	// 方塊 Mesh
	const geometry = new THREE.BoxGeometry(5, 5, 5)
	const material = new THREE.MeshNormalMaterial();
	const cube = new THREE.Mesh(geometry, material);
	cube.position.set(0, 0, 0);
	scene.add(cube);

	// 地板
	const planeGeometry = new THREE.PlaneGeometry(30, 30);
	const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
	const plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.rotation.x = -0.5 * Math.PI;
	plane.position.set(0, -3, 0);
	scene.add(plane);

	// 渲染器
	const renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight)
	renderer.setClearColor(0xeeeeee, 1.0)
	renderer.shadowMap.enable = true

	document.body.appendChild(renderer.domElement);

	// 軌道控制器
	const cameraControl = new THREE.OrbitControls(camera);
	cameraControl.enableDamping = true;
	cameraControl.dampingFactor = 0.25;
	cameraControl.autoRotate = false;

	// 動畫更新
	function render() {
	requestAnimationFrame(render)
	cameraControl.update()
	renderer.render(scene, camera)
	}

	render();
	</script>

	</body>
	</html>