小杰66
小杰66

threejs-day3(摄像机/阴影/雾/渲染目标/自定义缓冲几何体)

摄像机

透视摄像机PerspectiveCamera

import * as THREE from "../../three";
import { OrbitControls } from "../../three/examples/jsm/controls/OrbitControls";
import { GUI } from "dat.gui";

const canvas = document.querySelector("#canvas");
const view1Elem = document.querySelector("#view1");
const view2Elem = document.querySelector("#view2");

const renderer = new THREE.WebGLRenderer({ canvas });

const camera = new THREE.PerspectiveCamera(45, 2, 5, 100);
camera.position.set(0, 10, 20);

const scene = new THREE.Scene();
scene.background = new THREE.Color("black");

const cameraHelper = new THREE.CameraHelper(camera);
scene.add(cameraHelper);

class MinMaxGUIHelper {
  constructor(obj, minProp, maxProp, minDif) {
    this.obj = obj;
    this.minProp = minProp;
    this.maxProp = maxProp;
    this.minDif = minDif;
  }
  get min() {
    return this.obj[this.minProp];
  }
  set min(v) {
    this.obj[this.minProp] = v;
    this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
  }
  get max() {
    return this.obj[this.maxProp];
  }
  set max(v) {
    this.obj[this.maxProp] = v;
    this.min = this.min; // this will call the min setter
  }
}

const gui = new GUI();
gui.add(camera, "fov", 1, 180);
const minMaxGUIHelper = new MinMaxGUIHelper(camera, "near", "far", 0.1);
gui.add(minMaxGUIHelper, "min", 0.1, 50, 0.1).name("near");
gui.add(minMaxGUIHelper, "max", 0.1, 50, 0.1).name("far");

const controls = new OrbitControls(camera, view1Elem);
controls.target.set(0, 5, 0);
controls.update();

const camera2 = new THREE.PerspectiveCamera(60, 2, 0.1, 500);
camera2.position.set(40, 10, 40);
camera2.lookAt(0, 5, 0);

const controls2 = new OrbitControls(camera2, view2Elem);
controls2.target.set(0, 5, 0);
controls2.update();

{
  const planeSize = 40;

  const loader = new THREE.TextureLoader();
  const texture = loader.load("./assets/images/checker.png");
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.magFilter = THREE.NearestFilter;
  const repeats = planeSize / 2;
  texture.repeat.set(repeats, repeats);

  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
  const planeMat = new THREE.MeshPhongMaterial({
    map: texture,
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(planeGeo, planeMat);
  mesh.rotation.x = Math.PI * -0.5;
  scene.add(mesh);
}

{
  const cubeSize = 4;
  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
  const cubeMat = new THREE.MeshPhongMaterial({ color: "#8AC" });
  const mesh = new THREE.Mesh(cubeGeo, cubeMat);
  mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
  scene.add(mesh);
}

{
  const sphereRadius = 3;
  const sphereWidthDivisions = 32;
  const sphereHeightDivisions = 16;
  const sphereGeo = new THREE.SphereGeometry(
    sphereRadius,
    sphereWidthDivisions,
    sphereHeightDivisions
  );
  const sphereMat = new THREE.MeshPhongMaterial({ color: "#CA8" });
  const mesh = new THREE.Mesh(sphereGeo, sphereMat);
  mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
  scene.add(mesh);
}

{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(0, 10, 0);
  light.target.position.set(-5, 0, 0);
  scene.add(light);
  scene.add(light.target);
}

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function setScissorForElement(elem) {
  const canvasRect = canvas.getBoundingClientRect();
  const elemRect = elem.getBoundingClientRect();

  const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
  const left = Math.max(0, elemRect.left - canvasRect.left);
  const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
  const top = Math.max(0, elemRect.top - canvasRect.top);

  const width = Math.min(canvasRect.width, right - left);
  const height = Math.min(canvasRect.height, bottom - top);

  const positiveYUpBottom = canvasRect.height - bottom;
  renderer.setScissor(left, positiveYUpBottom, width, height);
  renderer.setViewport(left, positiveYUpBottom, width, height);

  return width / height;
}

function render() {
  resizeRendererToDisplaySize(renderer);

  renderer.setScissorTest(true);

  {
    const aspect = setScissorForElement(view1Elem);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
    cameraHelper.update();
    cameraHelper.visible = false;
    scene.background.set(0x000000);
    renderer.render(scene, camera);
  }

  {
    const aspect = setScissorForElement(view2Elem);
    camera2.aspect = aspect;
    camera2.updateProjectionMatrix();
    cameraHelper.visible = true;
    scene.background.set(0x000040);
    renderer.render(scene, camera2);
  }
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

z冲突问题
解决方法1可以在创建WebGLRenderer时开启logarithmicDepthBuffer为true但会大大降低运行速度。
解决方法2好好抉择near和far的设置

正交摄像机OrthographicCamera

import * as THREE from "../../three/build/three";
import { OrbitControls } from "../../three/examples/jsm/controls/OrbitControls";
import { GUI } from "dat.gui";

const canvas = document.querySelector("#canvas");
const view1Elem = document.querySelector("#view1");
const view2Elem = document.querySelector("#view2");

const renderer = new THREE.WebGLRenderer({ canvas });

const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 5, 50);
camera.zoom = 0.2;
camera.position.set(0, 10, 20);

const scene = new THREE.Scene();
scene.background = new THREE.Color("black");

const cameraHelper = new THREE.CameraHelper(camera);
scene.add(cameraHelper);

class MinMaxGUIHelper {
  constructor(obj, minProp, maxProp, minDif) {
    this.obj = obj;
    this.minProp = minProp;
    this.maxProp = maxProp;
    this.minDif = minDif;
  }
  get min() {
    return this.obj[this.minProp];
  }
  set min(v) {
    this.obj[this.minProp] = v;
    this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
  }
  get max() {
    return this.obj[this.maxProp];
  }
  set max(v) {
    this.obj[this.maxProp] = v;
    this.min = this.min; // this will call the min setter
  }
}

const gui = new GUI();
gui.add(camera, "zoom", 0.01, 1, 0.01).listen();
const minMaxGUIHelper = new MinMaxGUIHelper(camera, "near", "far", 0.1);
gui.add(minMaxGUIHelper, "min", 0.1, 50, 0.1).name("near");
gui.add(minMaxGUIHelper, "max", 0.1, 50, 0.1).name("far");

const controls = new OrbitControls(camera, view1Elem);
controls.target.set(0, 5, 0);
controls.update();

const camera2 = new THREE.PerspectiveCamera(60, 2, 0.1, 500);
camera2.position.set(16, 28, 40);
camera2.lookAt(0, 5, 0);

const controls2 = new OrbitControls(camera2, view2Elem);
controls2.target.set(0, 5, 0);
controls2.update();

{
  const planeSize = 40;

  const loader = new THREE.TextureLoader();
  const texture = loader.load("./assets/images/checker.png");
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.magFilter = THREE.NearestFilter;
  const repeats = planeSize / 2;
  texture.repeat.set(repeats, repeats);

  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
  const planeMat = new THREE.MeshPhongMaterial({
    map: texture,
    side: THREE.DoubleSide,
  });
  const mesh = new THREE.Mesh(planeGeo, planeMat);
  mesh.rotation.x = Math.PI * -0.5;
  scene.add(mesh);
}

{
  const cubeSize = 4;
  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
  const cubeMat = new THREE.MeshPhongMaterial({ color: "#8AC" });
  const mesh = new THREE.Mesh(cubeGeo, cubeMat);
  mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
  scene.add(mesh);
}

{
  const sphereRadius = 3;
  const sphereWidthDivisions = 32;
  const sphereHeightDivisions = 16;
  const sphereGeo = new THREE.SphereGeometry(
    sphereRadius,
    sphereWidthDivisions,
    sphereHeightDivisions
  );
  const sphereMat = new THREE.MeshPhongMaterial({ color: "#CA8" });
  const mesh = new THREE.Mesh(sphereGeo, sphereMat);
  mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
  scene.add(mesh);
}

{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(0, 10, 0);
  light.target.position.set(-5, 0, 0);
  scene.add(light);
  scene.add(light.target);
}

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function setScissorForElement(elem) {
  const canvasRect = canvas.getBoundingClientRect();
  const elemRect = elem.getBoundingClientRect();

  const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
  const left = Math.max(0, elemRect.left - canvasRect.left);
  const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
  const top = Math.max(0, elemRect.top - canvasRect.top);

  const width = Math.min(canvasRect.width, right - left);
  const height = Math.min(canvasRect.height, bottom - top);

  const positiveYUpBottom = canvasRect.height - bottom;
  renderer.setScissor(left, positiveYUpBottom, width, height);
  renderer.setViewport(left, positiveYUpBottom, width, height);

  return width / height;
}

function render() {
  resizeRendererToDisplaySize(renderer);

  renderer.setScissorTest(true);

  {
    const aspect = setScissorForElement(view1Elem);

    camera.left = -aspect;
    camera.right = aspect;

    camera.updateProjectionMatrix();
    cameraHelper.update();

    cameraHelper.visible = false;
    scene.background.set(0x000000);
    renderer.render(scene, camera);
  }

  {
    const aspect = setScissorForElement(view2Elem);
    camera2.aspect = aspect;
    camera2.updateProjectionMatrix();
    cameraHelper.visible = true;
    scene.background.set(0x000040);
    renderer.render(scene, camera2);
  }
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

阴影

Three.js 默认使用shadow maps（阴影贴图），阴影贴图的工作方式就是具有投射阴影的光能对所有能被投射阴影的物体从光源渲染阴影。
当多个灯光都可以投射阴影时通常会存在性能问题。常用的解决方式有

  • 允许多个光源，但只让一个光源能投射阴影。
  • 使用光照贴图或者环境光贴图，预先计算离线照明的效果。
  • 使用假阴影
import * as THREE from "../../three";

const canvas = document.querySelector("#canvas");
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.physicallyCorrectLights = true;

const camera = new THREE.PerspectiveCamera(45, 2, 0.1, 100);
camera.position.set(0, 10, 20);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();
scene.background = new THREE.Color("white");

const loader = new THREE.TextureLoader();

{
  const planeSize = 40;

  const texture = loader.load("./assets/images/checker.png");
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.magFilter = THREE.NearestFilter;
  const repeats = planeSize / 2;
  texture.repeat.set(repeats, repeats);

  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
  const planeMat = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide,
  });
  planeMat.color.setRGB(1.5, 1.5, 1.5);
  const mesh = new THREE.Mesh(planeGeo, planeMat);
  mesh.rotation.x = Math.PI * -0.5;
  scene.add(mesh);
}

const shadowTexture = loader.load("./assets/images/roundshadow.png");
const sphereShadowBases = [];
{
  const sphereRadius = 1;
  const sphereGeo = new THREE.SphereGeometry(sphereRadius, 32, 16);

  const planeSize = 1;
  const shadowGeo = new THREE.PlaneGeometry(planeSize, planeSize);

  const numSpheres = 15;
  for (let i = 0; i < numSpheres; ++i) {
    const base = new THREE.Object3D();
    scene.add(base);

    const u = i / numSpheres;
    const sphereMat = new THREE.MeshPhongMaterial();
    sphereMat.color.setHSL(u, 1, 0.75);
    const sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);
    sphereMesh.position.set(0, sphereRadius + 2, 0);
    base.add(sphereMesh);

    const shadowMat = new THREE.MeshBasicMaterial({
      map: shadowTexture,
      transparent: true,
      depthWrite: false,
    });
    const shadowMesh = new THREE.Mesh(shadowGeo, shadowMat);
    shadowMesh.position.y = 0.001;
    shadowMesh.rotation.x = Math.PI * -0.5;
    const shadowSize = sphereRadius * 4;
    shadowMesh.scale.set(shadowSize, shadowSize, shadowSize);
    base.add(shadowMesh);

    sphereShadowBases.push({
      base,
      sphereMesh,
      shadowMesh,
      y: sphereMesh.position.y,
    });
  }
}

{
  const skyColor = 0xb1e1ff;
  const groundColor = 0xb97a20;
  const intensity = 2;
  const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
  scene.add(light);
}

{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(0, 10, 5);
  light.target.position.set(-5, 0, 0);
  scene.add(light);
  scene.add(light.target);
}

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render(time) {
  time *= 0.001;
  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  sphereShadowBases.forEach((sphereShadowBase, ndx) => {
    const { base, sphereMesh, shadowMesh, y } = sphereShadowBase;
    const u = ndx / sphereShadowBases.length;
    const speed = time * 0.2;
    const angle = speed + u * Math.PI * 2 * (ndx % 1 ? 1 : -1);
    const radius = Math.sin(speed - ndx) * 10;
    base.position.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius);

    const yOff = Math.abs(Math.sin(time * 2 + ndx));
    sphereMesh.position.y = y + THREE.MathUtils.lerp(-2, 2, yOff);
    shadowMesh.material.opacity = THREE.MathUtils.lerp(1, 0.25, yOff);
  });

  renderer.render(scene, camera);

  requestAnimationFrame(render);
}

requestAnimationFrame(render);

上面的例子是使用加贴图的实现。
实际可以投射阴影的光有DirectionalLight，PointLight，SpotLight

//开启阴影属性
renderer.shadowMap.enabled = true
// 光能投射阴影
light.castShadow=true
//mesh投射接收阴影
mesh.castShadow = true
mesh.receiveShadow = true

光源的阴影相机决定了阴影投射的区域。
通过调整光源的阴影相机来调整该盒子的大小。
为什么不把阴影投射区域设为很大？
被投射产生的阴影有纹理有单位大小。投射的区域很大意味着投射的阴影会块状化。可以设置light.shadow.mapSize.width和 light.shadow.mapSize.height来设置阴影的纹理分辨率。默认为 512X512。如果设置的很大，他们在计算时将占用更多的内存，并且变得很慢。为了获得更真实的阴影，应该尽量将值设置的最小。renderer.capabilities.maxTextureSize对于每个用户都有最大纹理的上限值。

雾

通过创建 Fog||FogExp2 实例并设定scene的fog 属性。
Fog让你设定 near 和 far 属性，代表距离摄像机的距离。任何物体比 near 近不会受到影响，任何物体比 far 远则完全是雾的颜色。在 near 和 far 中间的物体，会从它们自身材料的颜色褪色到雾的颜色。
FogExp2会根据离摄像机的距离呈指数增长。

渲染目标

即threejs对帧缓存的实现

import * as THREE from "../../three";

const canvas = document.querySelector("#canvas");
const renderer = new THREE.WebGLRenderer({ canvas });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 5);
camera.position.z = 2;
{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  scene.add(light);
}

const renderTarget = new THREE.WebGLRenderTarget(512, 512);
const rtCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 5);
rtCamera.position.z = 2;
const rtScene = new THREE.Scene();
rtScene.background = new THREE.Color("red");
{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  rtScene.add(light);
}
const geometry = new THREE.BoxGeometry(1, 1, 1);
function makeInstance(geometry, color, x) {
  const material = new THREE.MeshPhongMaterial({ color });
  const cube = new THREE.Mesh(geometry, material);
  rtScene.add(cube);
  cube.position.x = x;
  return cube;
}
const rtCubes = [
  makeInstance(geometry, 0x44aa88, 0),
  makeInstance(geometry, 0x8844aa, -2),
  makeInstance(geometry, 0xaa8844, 2),
];

const material = new THREE.MeshPhongMaterial({
  map: renderTarget.texture,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render(time) {
  time *= 0.001;

  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  rtCubes.forEach((cube, ndx) => {
    const speed = 1 + ndx * 0.1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });

  renderer.setRenderTarget(renderTarget); //即绑定帧缓存
  renderer.render(rtScene, rtCamera); //绘制帧缓存
  renderer.setRenderTarget(null); //回到默认缓冲

  cube.rotation.x = time;
  cube.rotation.y = time * 1.1;
  renderer.render(scene, camera);

  requestAnimationFrame(render);
}

requestAnimationFrame(render);

自定义缓冲几何体

import * as THREE from "../../three";

const canvas = document.querySelector("#canvas");
const renderer = new THREE.WebGLRenderer({ canvas });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 100);
camera.position.z = 5;

{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4);
  scene.add(light);
}

const vertices = [
  // front
  { pos: [-1, -1, 1], norm: [0, 0, 1], uv: [0, 0] }, // 0
  { pos: [1, -1, 1], norm: [0, 0, 1], uv: [1, 0] }, // 1
  { pos: [-1, 1, 1], norm: [0, 0, 1], uv: [0, 1] }, // 2
  { pos: [1, 1, 1], norm: [0, 0, 1], uv: [1, 1] }, // 3
  // right
  { pos: [1, -1, 1], norm: [1, 0, 0], uv: [0, 0] }, // 4
  { pos: [1, -1, -1], norm: [1, 0, 0], uv: [1, 0] }, // 5
  { pos: [1, 1, 1], norm: [1, 0, 0], uv: [0, 1] }, // 6
  { pos: [1, 1, -1], norm: [1, 0, 0], uv: [1, 1] }, // 7
  // back
  { pos: [1, -1, -1], norm: [0, 0, -1], uv: [0, 0] }, // 8
  { pos: [-1, -1, -1], norm: [0, 0, -1], uv: [1, 0] }, // 9
  { pos: [1, 1, -1], norm: [0, 0, -1], uv: [0, 1] }, // 10
  { pos: [-1, 1, -1], norm: [0, 0, -1], uv: [1, 1] }, // 11
  // left
  { pos: [-1, -1, -1], norm: [-1, 0, 0], uv: [0, 0] }, // 12
  { pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 0] }, // 13
  { pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 1] }, // 14
  { pos: [-1, 1, 1], norm: [-1, 0, 0], uv: [1, 1] }, // 15
  // top
  { pos: [1, 1, -1], norm: [0, 1, 0], uv: [0, 0] }, // 16
  { pos: [-1, 1, -1], norm: [0, 1, 0], uv: [1, 0] }, // 17
  { pos: [1, 1, 1], norm: [0, 1, 0], uv: [0, 1] }, // 18
  { pos: [-1, 1, 1], norm: [0, 1, 0], uv: [1, 1] }, // 19
  // bottom
  { pos: [1, -1, 1], norm: [0, -1, 0], uv: [0, 0] }, // 20
  { pos: [-1, -1, 1], norm: [0, -1, 0], uv: [1, 0] }, // 21
  { pos: [1, -1, -1], norm: [0, -1, 0], uv: [0, 1] }, // 22
  { pos: [-1, -1, -1], norm: [0, -1, 0], uv: [1, 1] }, // 23
];

const positions = [];
const normals = [];
const uvs = [];
for (const vertex of vertices) {
  positions.push(...vertex.pos);
  normals.push(...vertex.norm);
  uvs.push(...vertex.uv);
}

const geometry = new THREE.BufferGeometry();
const positionNumComponents = 3;
const normalNumComponents = 3;
const uvNumComponents = 2;
geometry.setAttribute(
  "position",
  new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents)
);
geometry.setAttribute(
  "normal",
  new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents)
);
geometry.setAttribute(
  "uv",
  new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents)
);
geometry.setIndex([
  0,
  1,
  2,
  2,
  1,
  3,
  4,
  5,
  6,
  6,
  5,
  7,
  8,
  9,
  10,
  10,
  9,
  11,
  12,
  13,
  14,
  14,
  13,
  15,
  16,
  17,
  18,
  18,
  17,
  19,
  20,
  21,
  22,
  22,
  21,
  23,
]);

const loader = new THREE.TextureLoader();
const texture = loader.load("./assets/images/star.png");

function makeInstance(geometry, color, x) {
  const material = new THREE.MeshPhongMaterial({ color, map: texture });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  cube.position.x = x;
  return cube;
}

const cubes = [
  makeInstance(geometry, 0x88ff88, 0),
  makeInstance(geometry, 0x8888ff, -4),
  makeInstance(geometry, 0xff8888, 4),
];

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render(time) {
  time *= 0.001;

  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  cubes.forEach((cube, ndx) => {
    const speed = 1 + ndx * 0.1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });

  renderer.render(scene, camera);

  requestAnimationFrame(render);
}

requestAnimationFrame(render);

你可能感兴趣的:(threejs-day3(摄像机/阴影/雾/渲染目标/自定义缓冲几何体))

  • Day31-【AI思考】-关键支点识别与战略聚焦框架 一个一定要撑住的学习者 #AI深度思考学习方法人工智能
    文章目录关键支点识别与战略聚焦框架**第一步：支点目标四维定位法****第二步：支点验证里程碑设计****第三步：目标网络重构方案****第四步：动态监控仪表盘**执行工具箱核心心法关键支点识别与战略聚焦框架让思想碎片重焕生机的灵魂：在当前纷繁复杂的目标清单中，哪一项是只要达成就能引发其他目标多米诺式突破的关键支点？这个支点是否具备可被验证的阶段性里程碑？”这个问题像精准的手术刀，旨在帮助您：识别
  • XXL-CRAWLER v1.4.0 ｜ Java爬虫框架 后端爬虫java
    ReleaseNotes1、【提升】爬虫JS渲染能力强化：升级提供"Selenium+ChromeDriver"方案支持JS渲染，兼容性更高，废弃旧Phantomjs方案。非JS渲染场景仍然Jsoup，速度更快。同时支持自由扩展其他实现。2、【优化】进一步优化Selenium兼容问题，完善JS渲染场景下兼容性和性能。3、【重构】重构核心功能模块，提升扩展性；修复历史代码隐藏问题，提升系统稳定习惯。
  • kafka自定义分区器无法接收到数据 一嗷 kafka
    记录一下大无语事件，今天看尚硅谷的kafka自定义分区器，结果自己编写得分区器kafka一直接收不到数据，idea里也终端没有语句输出，找了好久才发现问题。自定义分区器代码：importorg.apache.kafka.clients.producer.Partitioner;importorg.apache.kafka.common.Cluster;importjava.util.Map;pub
  • kafka中的自定义分区器使用详解 皮哥四月红 Kafkakafka
    综述在Kafka中，topic是逻辑上的概念，而partition是物理上的概念。不用担心，这些对用户来说是透明的。生产者（producer）只关心自己将消息发布到哪个topic，而消费者（consumer）只关心自己订阅了哪个topic上的消息，至少topic上的消息分布在哪些partition节点上，它本身并不关心。设想一下，如果在Kafka中没有分区的话，那么topic的消息集合将集中于某一
  • kafka自定义分区 程序猿郭鹏飞神奇经历 kafkakafka自定义分区kafkapartition
    默认的分区策略1.如果键值为null，并且使用了默认的分区器，那么记录将被随机地发送到主题内各个可用的分区上。分区器使用轮询（RoundRobin）算法将消息均衡地分布到各个分区上。2.如果键不为空，并且使用了默认的分区器，那么Kafka会对键取hash值然后根据散列值把消息映射到特定的分区上。这里的关键之处在于，同一个键总是被映射到同一个分区上，所以在进行映射时，我们会使用主题所有的分区，而不仅
  • python图像差分法目标检测_OpenCV实现帧差法检测运动目标 weixin_39708854 python图像差分法目标检测
    今天的目标是用OpenCV实现对运动目标的检测，这里选用三帧帧差法。代码如下：#include#include#include#include#includedoubleThreshold_index=0;constintCONTOUR_MAX_AERA=200;voidtrackbar(intpos){Threshold_index=(double)pos;}intmain(intargc,ch
  • 【Kafka】Kafka自定义分区器 beautiful_huang kafkakafka
    1.默认的分区策略(1)如果键值为null，并且使用了默认的分区器，那么记录将被随机地发送到主题内各个可用的分区上。分区器使用轮询（RoundRobin）算法将消息均衡地分布到各个分区上。(2)如果键不为空，并且使用了默认的分区器，那么Kafka会对键取hash值然后根据散列值把消息映射到特定的分区上。这里的关键之处在于，同一个键总是被映射到同一个分区上，所以在进行映射时，我们会使用主题所有的分区
  • 搜索引擎快速收录：关键词布局的艺术 百度网站快速收录 搜索引擎百度快速收录网站快速收录
    本文来自：百万收录网原文链接：https://www.baiwanshoulu.com/21.html搜索引擎快速收录中的关键词布局，是一项既精细又富有策略性的工作。以下是对关键词布局艺术的详细阐述：一、关键词布局的重要性关键词布局影响着后期页面是否被收录，以及网站在搜索引擎中的排名。合理的关键词布局能够提升网站的可见性，吸引更多的目标用户，从而实现网站流量的增长。二、关键词布局的原则相关性：关键
  • 如何在 Kafka 中实现自定义分区器 My LQS 学习笔记篇历史经验篇kafka分布式
    今天我来给大家分享一下如何在Kafka中实现一个自定义分区器。Kafka是一个分布式流处理平台，能够高效地处理海量数据。默认情况下，Kafka使用键的哈希值来决定消息应该发送到哪个分区，但是有时我们需要根据特定的业务逻辑来定制分区策略。这时候，自定义分区器就显得格外重要了。什么是Kafka分区器？Kafka中的分区器（Partitioner）决定了每条消息应该被发送到哪个分区。Kafka默认提供了
  • Vue中使input和el-input自动获取焦点的处理 宸晓闹 vue
    【普通input的自定义指令操作】：先在入口文件注册一个全局自定义指令//main.jsVue.directive('focus',{inserted(el,binding,vnode){//聚焦元素el.focus()}}
  • pytorch实现简单的情感分析算法 纠结哥_Shrek pytorch人工智能python
    在PyTorch中实现中文情感分析算法通常涉及以下几个步骤：数据预处理、模型定义、训练和评估。下面是一个简单的实现示例，使用LSTM模型进行中文情感分析。1.数据预处理首先，我们需要对中文文本进行分词，并将文本转换为数值形式（如词向量）。可以使用jieba进行分词，并使用torchtext或自定义的词汇表将词语转换为索引。importtorchimporttorch.nnasnnimporttor
  • # 深入解析Lodop底层原理与高级应用开发指南 R.Y.N 前端
    一、Lodop架构深度解析（与常规文档的差异化视角）1.1非对称通信协议设计Lodop采用独特的混合型RPC协议，突破传统打印控件基于HTTP的局限性：二进制协议头：前128字节包含加密的会话标识符和指令类型JSON压缩负载：采用自定义的LZJ压缩算法处理JSON打印指令跨域握手机制：通过动态生成XOR校验码实现跨域安全通信//协议逆向解析示例（模拟）functiondecodeLodopPack
  • 自定义 LLM：LangChain与文心一言擦出火花 AI领航者 langchain文心一言机器学习人工智能chatgpt
    自定义LLM自定义LLM需要实现以下必要的函数：_call：它需要接受一个字符串、可选的停用词，并返回一个字符串。它还可以实现第二个可选的函数：_identifying_params：用于帮助打印LLM信息。该函数应该返回一个字典。使用LLM模块来封装我们的模型接口，可以带来许多好处，其中之一就是有利于与LangChain的其他模块进行协同工作。下面我们通过LangChain自定义LLM实现文心一
  • jmeter java请求实例_Jmeter自定义Java请求，继承AbstractJavaSamplerClient weixin_39534100 jmeterjava请求实例
    首先，使用Eclipse新建一个项目，然后从Jmeter的lib/ext目录下中拷贝ApacheJMeter_java.jar和ApacheJMeter_core.jar两个文件，然后引入这两个JAR包到项目中。1、右键点击项目名>BuildPath>ConfigureBuildPath...2、弹框选择Libraries>AddExternalJARs...3、选择ApacheJMeter_ja
  • 打造百年企业的高层修炼之道 low sapkj
    本文还有配套的精品资源，点击获取简介：在竞争激烈的商业环境中，建立一家持续繁荣的百年企业是许多企业家和管理者的追求。本资料包《如何打造百年企业》专注于探讨实现这一目标过程中企业高层应具备的关键素质和战略思维。内容涵盖领导力和愿景、企业文化建设、持续创新、风险管理、社会责任与可持续发展、人才培养与梯队建设、全球化视野等多个方面。打造百年企业需要系统工程，高层管理者必须具备领导力、战略思维、创新能力、
  • 03-1.python爬虫-爬虫简介 执着的小火车 python入门到项目实践爬虫pythonhttp
    03-1.python爬虫-爬虫简介简介Python爬虫是一种使用Python编程语言编写的程序，用于自动从互联网上获取网页数据。它可以模拟人类浏览器的行为，发送HTTP请求到目标网站，获取网页的HTML内容，然后通过解析HTML提取所需的数据，如文本、图片链接、表格数据等。爬虫的应用广泛，比如在数据挖掘领域，可收集大量数据用于分析趋势和模式；在信息聚合方面，能将不同网站的特定信息汇总到一处；还可
  • 【机器学习】自定义数据集 使用paddlepaddle框架实现逻辑回归并保存模型，然后保存模型后再加载模型进行预测 加德霍克 机器学习paddlepaddle逻辑回归python作业
    一、使用paddlepaddle框架实现逻辑回归1.数据部分：首先自定义了一个简单的数据集，特征X是100个随机样本，每个样本一个特征，目标值y基于线性关系并添加了噪声。将numpy数转换为Paddlepaddle张量，方便后续在模型中使用。2.模型定义部分：方案1：使用nn.Sequential组网代码解释①数据生成与转换：生成自定义的特征矩阵X和目标值向量y，并添加高斯噪声模拟真实数据。使用p
  • 我的架构梦：（一）手写MyBatis框架 老周聊架构 我的架构梦
    手写mybatis框架一、前言二、JDBC问题分析三、自定义框架实现四、自定义框架优化五、代码仓库一、前言在手写mybatis框架之前，我们先来思考一下这个问题：为啥要有mybatis框架存在？它是为了解决什么问题的？我们带着这两个问题来开始我们手写mybatis框架之旅。我们刚开始搞java的时候，貌似都知道用jdbc去连接数据库，那我们来看一下jdbc连接数据库的代码：publicstatic
  • redis如何备份文件？ 即兴小索奇 Linuxredis数据库缓存
    要单独备份一个文件，可以按照下面的步骤操作：使用cp命令：这就是最简单的方式。比如，如果你想备份redis.conf文件，只需要在终端执行：cpredis.confredis.conf.bck这会将redis.conf文件复制成redis.conf.bck，作为备份。选择备份的目标路径：如果你想将备份文件存放到特定目录，可以指定完整路径。例如，如果你想把文件备份到/home/user/backup
  • JS - 手写 instanceof 和 new 关键字 DavidZ_13 手写实现代码javascript前端node.js经验分享笔记其他web
    目录instanceof解释手写实现new关键字解释手写实现instanceof解释instanceof是JavaScript中的运算符，用于检查一个对象是否是另一个对象的实例，其实现原理如下：当使用instanceof运算符时，会调用对象的[[Symbol.hasInstance]]方法，该方法在对象的原型链上递归查找，判断目标对象是否为指定类的实例，如果在原型链中找到指定类的原型对象，则返回t
  • jQuery可选择日期范围的日期选择器插件 �时过境迁，物是人非 jquery前端javascript
    jQueryDateRangePicker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式，可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好，支持IE6+的IE浏览器。预览下载该日期选择器的特点有：支持IE6+,Firefox,Chrome,Safari和其他标准的HTML5浏览器。支持多种语言。使用CSS来渲染样式。容易使用和定制。支
  • 第二十九章： 使用 Docker BuildX 构建多架构 Docker 镜像 半部论语 Docker入门教程docker架构容器
    使用DockerBuildX构建多架构Docker镜像目标掌握安装DockerBuildx插件与启用Buildx构建器构建多架构平台验证镜像兼容性以及发布和分发Buildx是什么Buildx是一个由Docker社区开发的工具，用于构建和管理容器镜像。它提供了一种更高级的构建方式，支持多阶段构建、多平台构建、并行构建等功能，使得容器镜像的构建更加灵活高效。Buildx在DockerCLI的基础上扩展
  • 离线环境下通过docker安装redis镜像 MonkeyKing.sun dockerredis容器
    1.在其他机器上下载Redis镜像你可以在一台能够访问外网的机器上拉取Redis镜像，并将其导出为文件，然后将文件传输到你的目标机器进行加载。步骤：在有网络访问的机器上拉取Redis镜像：在有网络的机器上，使用以下命令拉取Redis镜像：dockerpullredis将镜像保存为tar文件：使用dockersave命令将拉取的镜像保存为一个tar文件：dockersave-oredis_image
  • 深度学习模型在汽车自动驾驶领域的应用 eso1983 深度学习汽车自动驾驶
    汽车自动驾驶是一个高度复杂的系统，深度学习和计算技术在其中扮演核心角色。今天简单介绍一下自动驾驶领域常用的深度学习模型及其计算原理的解析。1.深度学习模型分类及应用场景1.1视觉感知模型CNN（卷积神经网络）应用：图像分类、物体检测（车辆、行人、交通标志）、语义分割（道路、车道线）。典型模型：YOLO：实时目标检测，低延迟特性适合自动驾驶。MaskR-CNN：结合检测与像素级分割，用于精确场景理解
  • vue中的el是指什么 是小傲雨呀^_^ vue.js前端javascript
    简介：在Vue.js中，el指的是Vue实例的挂载元素。具体来说，el是一个选项，用于指定Vue实例应该挂载到哪个DOM元素上。通过这个选项，Vue可以知道应该从哪个元素开始进行模板编译和渲染。它可以是一个CSS选择器字符串，也可以是一个直接的DOM元素。el的定义：el是Vue实例的一个选项，用于指定Vue实例应该挂载到哪个DOM元素上。用途：指定挂载点：el选项的主要作用是指定Vue实例的挂载
  • Pyecharts之特殊图表的独特展示 抱抱宝 Python数据分析与可视化信息可视化数据分析python
    在数据可视化的世界里，除了常见的柱状图、折线图、饼图等，还有一些特殊的图表可以为我们带来独特的展示效果，帮助我们以更有趣、更直观的方式呈现数据。Pyecharts为我们提供了多种特殊图表的绘制功能，本文将介绍象形图、水球图和日历图的定制方法，让你能够创建出与众不同的数据可视化作品。一、象形图自定义图形象形图是一种使用自定义图形来表示数据的图表，比普通的柱状图更加形象生动。下面是pictorialb
  • Redisson详解 好运仔dzl Java笔记redis分布式springboot
    什么是Redisson？什么业务中用过Redis的分布式锁？在SpringBoot中怎么用分布式锁？用的是哪个工具类？怎么设这个分布式锁？什么是Redisson？Redisson是一个用于Java的Redis客户端，它不仅提供了对Redis命令的访问，还实现了多种分布式对象、锁和同步工具。Redisson的设计目标是简化在分布式系统中使用Redis的复杂度，并为开发者提供更高层次的抽象，以便更容易
  • node笔记_koa框架的路由 yma16 JavaScript专栏nodejs专栏笔记javascriptnode.js前端
    文章目录⭐前言⭐koa原生路由写法⭐引入koa-router安装koa-router动态读取路径文件作为路由⭐结束⭐前言大家好，我是yma16，本文介绍koa框架的路由。往期文章node_windows环境变量配置node_npm发布包linux_配置nodenode_nvm安装配置node笔记_http服务搭建（渲染html、json）node笔记_读文件node笔记_写文件
  • 缓存的多种实现方式 养生编程大队长 Java学习缓存
    1.谷歌的guava包下面的Cache，基于内存的缓存2.自定义缓存，例如使用静态Map实现3.分布式缓存redis，memcached4.EHcache
  • Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践 2401_84447112 程序员前端中间件架构
    最后如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基本使用router.get(“/”,asyncctx=>{ctx.body=“h
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他