cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
  <!-- 自分でダウンロードしたファイルでも良いです   -->
  <script src="http://panda-space.com/js/OrbitControls.js"></script>
</head>
            
          
!
            
              //scene
var scene = new THREE.Scene();

//camera
var fov = 75;
var aspect = window.innerWidth / window.innerHeight;
var near = 0.1;
var far = 1000;
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
var camera_position_x0 = 0;
var camera_position_y0 = 0;
var camera_position_z0 = -10;
camera.position.set(camera_position_x0, camera_position_y0, camera_position_z0);

//light
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(50, 50, 50);
scene.add(light);

//環境光
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);

//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);

document.body.appendChild(renderer.domElement);

//マウスでぐるぐる動かせるようにする
var controls = new THREE.OrbitControls(camera);

//補助軸の表示(赤:x軸、緑:y軸、青:z軸)
var axis = new THREE.AxisHelper(1000);
scene.add(axis);

//平面
var planeGeometry = new THREE.PlaneGeometry(10, 10, 10, 10);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xff3300});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.set(-Math.PI/2, 0, 0);
scene.add(plane);

//直方体、立方体
// var boxGeometry = new THREE.BoxGeometry(5, 5, 5);
// var boxMaterial = new THREE.MeshBasicMaterial({color: 0xff00ff});
// var box = new THREE.Mesh(boxGeometry, boxMaterial);
// box.position.set(3, 3, 3);
// scene.add(box);

// var boxMaterial2 = new THREE.MeshBasicMaterial({color: 0xff0000});
// var box2 = new THREE.Mesh(boxGeometry, boxMaterial2);
// box2.position.set(3, 3, 8);
// scene.add(box2);

for(i = 0; i < 50; i++){
  var boxGeometry = new THREE.BoxGeometry(5, 5, 5);
  var color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
  console.log(color);
  var boxMaterial = new THREE.MeshBasicMaterial({color: color});
  var box = new THREE.Mesh(boxGeometry, boxMaterial);
  box.position.set(3, 3, i*5);
  scene.add(box);
}

//角錐〜円錐
var coneGeometry = new THREE.ConeGeometry(5, 20, 3);
var coneMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(-5, 0, 0);
scene.add(cone);

//角柱〜円柱
var cylinderGeometry = new THREE.CylinderGeometry(3, 1, 20, 8);
var cylinderMaterial = new THREE.MeshBasicMaterial({color: 0xff5599});
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder.position.set(14, -4, 0);
scene.add(cylinder);

//球
var sphereGeometry = new THREE.SphereGeometry(2, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x34ffff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(0, 10, 0);
scene.add(sphere);

//ドーナッツ
var torusGeometry = new THREE.TorusGeometry(10, 4, 6, 12);
var torusMaterial = new THREE.MeshBasicMaterial({color: 0x34ffff, wireframe: true});
var torus = new THREE.Mesh(torusGeometry, torusMaterial);
torus.position.set(0, 0, 15);
scene.add(torus);

//なんかクネクネしてるやつ
var torusKnotGeometry = new THREE.TorusKnotGeometry(3, 3, 3, 3, 3, 2);
var torusKnotMaterial = new THREE.MeshBasicMaterial({color: 0xff34ff, wireframe: true});
var torusKnot = new THREE.Mesh(torusKnotGeometry, torusKnotMaterial);
torusKnot.position.set(0, 0, -10);
scene.add(torusKnot);

//シーンのレンダリング
function rendererRender(){
  renderer.render(scene, camera);
  controls.update();
  requestAnimationFrame(rendererRender);
}

rendererRender();
            
          
!
999px
Loading ..................

Console