https://teratail.com/questions/fr8fn8qkj5xdpj
teratail's answer
by cx20
HTML
<div id="container"></div>
<script type="importmap">
{
"imports": {
"three": "https://cx20.github.io/gltf-test/libs/three.js/r143/build/three.module.js",
"three/examples/jsm/": "https://cx20.github.io/gltf-test/libs/three.js/r143/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
let container;
let camera, scene, renderer;
let controls;
let wagons = [];
let rot = 0;
//const MODEL = 'https://rawcdn.githack.com/cx20/jsdo-static-contents/c425a29b238b094c752a5a07f1dda1b8db582150/models/gltf/2.0/SimpleModel4/glTF-Binary/SimpleModel4.glb';
const MODEL = 'https://cx20.github.io/gltf-test/tutorialModels/SimpleTexture/glTF/SimpleTexture.gltf';
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
const ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
const loader = new GLTFLoader();
loader.setCrossOrigin('anonymous');
for (let i = 0; i < 8; i++)
{
loader.load(MODEL, (gltf) => {
const obj = gltf.scene;
obj.position.x = 2 * Math.sin(Math.PI / 180 * (360*i/8));
obj.position.y = 2 * Math.cos(Math.PI / 180 * (360*i/8));
const axesHelper = new THREE.AxesHelper( 1 );
obj.add(axesHelper);
scene.add(obj);
wagons.push(obj);
});
}
controls = new OrbitControls( camera, renderer.domElement );
}
function...
CSS
html, body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
body {
background: #000;
}