three打造一个三维盆景效果代码-html代码-BFW代码库

three打造一个三维盆景效果代码

代码语言：html

所属分类：三维

代码描述：three打造一个三维盆景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}
</style>




</head>

<body translate="no" >
  
 
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.r118.js"></script>
      <script type="module">
import { OrbitControls } from "https://unpkg.com/three@0.120.1/examples/jsm/controls/OrbitControls.js";

var camera,
scene,
renderer,
controls,
armMat,
mesh,
time = 0;

initThree();
animate();

function initThree() {
  scene = new THREE.Scene();

  // RENDER
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  // renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

  // CAMERA
  camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.001,
  200);

  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 5;
  scene.add(camera);

  // CONTROLS
  controls = new OrbitControls(camera, renderer.domElement);
  controls.update();

  // LIGHTS
  var light = new THREE.AmbientLight(0xffffff, 0.7, 100);
  scene.add(light);

  var light = new THREE.DirectionalLight(0xffffff, 1, 100);
  light.position.set(-3, 5, -3); //default; light shining from top
  scene.add(light);

  // var planeGeometry = new THREE.PlaneBufferGeometry(200, 200, 32, 32);
  // var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
  // var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  // plane.rotateX(Math.PI / -2);
  let radius = 1;

  let sphereGeo = new THREE.IcosahedronGeometry(radius * 0.68, 1);
  let sphereMat = new THREE.MeshBasicMaterial({ color: 0xff833b });
  let sphereObj = new THREE.Mesh(sphereGeo, sphereMat);
  scene.add(sphereObj);

  let legGeo = new THREE.CylinderGeometry(
  radius * 0.1,
  radius * 0.1,
  radius * 2,
  16);

  let leg = new THREE.Mesh(legGeo, sphereMat);
  leg.position.setY(-radius);
  scene.add(leg);

  let eMat = new THREE.MeshBasicMaterial({ color: 0xbbbbbb });
  let e1G = new THREE.BoxGeometry(radius, radius * 0.2, radius);
  let e1 = new THREE.Mesh(e1G, eMat);
  e1.position.setY(-radius * 2);
  scene.add(e1);

  let isoGeo = new THREE.IcosahedronGeometry(radius, 1);

  let armGeo = new THREE.CylinderBufferGeometry(
  0, //radius top
  0.1, //radius bottom
  radius * 1.25, //height
  16, //radial segments
  16, // height segments
  false // open ended
  );
  armMat = new THREE.ShaderMaterial({
    uniforms: {
      time: { type: "f", value: time } },

    vertexShader: `uniform float time;
varying vec2 vUv;
varying vec3 vPosition;
uniform vec2 pixels;
attribute vec3 rgb;
varying vec3 vrgb;

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;}

float mod289(float x) {
  return x - floor(x *.........完整代码请登录后点击上方下载按钮下载查看