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

代码语言：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 * (1.0 / 289.0)) * 289.0; }

vec4 permute(vec4 x) {
	return mod289(((x*34.0)+1.0)*x);}

float permute(float x) {
     return mod289(((x*34.0)+1.0)*x);}

vec4 taylorInvSqrt(vec4 r){
  return 1.79284291400159 - 0.85373472095314 * r;}

float taylorInvSqrt(float r){
  return 1.79284291400159 - 0.85373472095314 * r;}

vec4 grad4(float j, vec4 ip)
  {
  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
  vec4 p,s;

  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
  s = vec4(lessThan(p, vec4(0.0)));
  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www; 

  return p;
  }
#define F4 0.309016994374947451
float snoise(vec4 v) {
  const vec4  C = vec4( 0.138196601125011,  // (5 - sqrt(5))/20  G4
                        0.276393202250021,  // 2 * G4
                        0.414589803375032,  // 3 * G4
                       -0.447213595499958); // -1 + 4 * G4

	// First corner
  vec4 i  = floor(v + dot(v, vec4(F4)) );
  vec4 x0 = v -   i + dot(i, C.xxxx);

	// Other corners

	// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
  vec4 i0;
  vec3 isX = step( x0.yzw, x0.xxx );
  vec3 isYZ = step( x0.zww, x0.yyz );
	//  i0.x = dot( isX, vec3( 1.0 ) );
  i0.x = isX.x + isX.y + isX.z;
  i0.yzw = 1.0 - isX;
	//  i0.y += dot( isYZ.xy, vec2( 1.0 ) );
  i0.y += isYZ.x + isYZ.y;
  i0.zw += 1.0 - isYZ.xy;
  i0.z += isYZ.z;
  i0.w += 1.0 - isYZ.z;

  // i0 now contains the unique values 0,1,2,3 in each channel
  vec4 i3 = clamp( i0, 0.0, 1.0 );
  vec4 i2 = c.........完整代码请登录后点击上方下载按钮下载查看